VisActor VSeed
介绍
配置项
测试用例
贡献指南
Playground
了解VChart
了解VTable
介绍
配置项
测试用例
贡献指南
Playground
了解VChart
了解VTable

dualAxis

measures

INFO

配置双轴图指标

若measures有1层, 第一个指标应用于主轴, 第二个指标及其之后的指标, 一起应用于次轴. 绘制一个普通双轴图.

若measures有2层, 第一组指标应用于主轴, 第二组指标用于次轴, 第三组及其之后的指标组会被忽略. 绘制一个普通双轴图.

若measures有3层, 每一组指标用于绘制一个双轴图, 自上而下, 纵向排列. 绘制一个组合双轴图.

双轴图(measures 1 层)

1export const DualAxisChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    measures: [
5      { id: 'sales', alias: '销售额' },
6      { id: 'profit', alias: '利润' },
7    ],
8    dataset: [
9      { date: '2019', profit: 10, sales: 200 },
10      { date: '2020', profit: 30, sales: 600 },
11      { date: '2021', profit: 30, sales: 600 },
12      { date: '2022', profit: 50, sales: 1000 },
13      { date: '2023', profit: 40, sales: 800 },
14    ],
15  }
16  return <VChartRender vseed={vseed} />
17})

双轴图(measures 2 层)

1export const DualAxisChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    measures: [
5      {
6        id: 'primary',
7        children: [{ id: 'sales', alias: '销售额' }],
8      },
9      {
10        id: 'secondary',
11        children: [{ id: 'profit', alias: '利润' }],
12      },
13    ],
14    dataset: [
15      { date: '2019', profit: 10, sales: 200 },
16      { date: '2020', profit: 30, sales: 600 },
17      { date: '2021', profit: 30, sales: 600 },
18      { date: '2022', profit: 50, sales: 1000 },
19      { date: '2023', profit: 40, sales: 800 },
20    ],
21  }
22  return <VChartRender vseed={vseed} />
23})

组合双轴图(measures 3 层)

1export const CombinationDualAxisChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    measures: [
5      {
6        id: 'first',
7        alias: '第一个双轴图',
8        children: [
9          {
10            id: 'secondary-profit',
11            children: [{ id: 'profit', alias: '利润' }],
12          },
13          {
14            id: 'primary-sales',
15            children: [{ id: 'sales', alias: '销售额' }],
16          },
17        ],
18      },
19      {
20        id: 'second',
21        alias: '第一个双轴图',
22        children: [
23          {
24            id: 'primary-ratio',
25            children: [{ id: 'ratio', alias: '比率' }],
26          },
27          {
28            id: 'returnRatio',
29            children: [{ id: 'returnRatio', alias: '回报率' }],
30          },
31        ],
32      },
33    ],
34    dataset: [
35      { date: '2019', profit: 10, sales: 100, ratio: 301, returnRatio: 301 },
36      { date: '2020', profit: 30, sales: 3200, ratio: 32, returnRatio: 30 },
37      { date: '2021', profit: 30, sales: 300, ratio: 103, returnRatio: 503 },
38      { date: '2022', profit: 50, sales: 2400, ratio: 30, returnRatio: 24 },
39      { date: '2023', profit: 40, sales: 500, ratio: 305, returnRatio: 305 },
40    ],
41    dimensions: [
42      {
43        id: 'date',
44        alias: '日期',
45      },
46    ],
47  }
48  return <PivotChart vseed={vseed} />
49})

dualMeasures

INFO

dualMeasures 是 measures 的一个便捷扩展, 用于配置双轴图的指标.

若dualMeasures仅有1项, 则绘制一个普通双轴图.

若dualMeasures至少有2项, 则绘制一个组合双轴图.

双轴图(dualMeasures 1 项)

1export const DualAxisChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    dualMeasures: [
5      {
6        primaryMeasures: [{ id: 'profit' }],
7        secondaryMeasures: [{ id: 'sales' }],
8      },
9    ],
10    dataset: [
11      { date: '2019', profit: 10, sales: 200 },
12      { date: '2020', profit: 30, sales: 600 },
13      { date: '2021', profit: 30, sales: 600 },
14      { date: '2022', profit: 50, sales: 1000 },
15      { date: '2023', profit: 40, sales: 800 },
16    ],
17  }
18  return <VChartRender vseed={vseed} />
19})

组合透视图(dualMeasures 2 项)

1export const CombinationDualAxisChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    dualMeasures: [
5      {
6        primaryMeasures: [{ id: 'profit' }],
7        secondaryMeasures: [{ id: 'sales' }],
8      },
9      {
10        primaryMeasures: [{ id: 'ratio' }],
11        secondaryMeasures: [{ id: 'returnRatio' }],
12      },
13    ],
14    dataset: [
15      { date: '2019', profit: 10, sales: 100, ratio: 301, returnRatio: 301 },
16      { date: '2020', profit: 30, sales: 3200, ratio: 32, returnRatio: 30 },
17      { date: '2021', profit: 30, sales: 300, ratio: 103, returnRatio: 503 },
18      { date: '2022', profit: 50, sales: 2400, ratio: 30, returnRatio: 24 },
19      { date: '2023', profit: 40, sales: 500, ratio: 305, returnRatio: 305 },
20    ],
21    dimensions: [
22      {
23        id: 'date',
24        alias: '日期',
25      },
26    ],
27  }
28  return <PivotChart vseed={vseed} />
29})

dimensions

透视组合双轴图

1export const PivotDualAxisChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    dimensions: [
5      {
6        id: 'date',
7        alias: '日期',
8      },
9      {
10        id: 'type',
11        alias: '类型',
12        encoding: 'row',
13      },
14      {
15        id: 'test',
16        alias: '测试',
17        encoding: 'column',
18      },
19    ],
20    dataset: [
21      { date: '2019', type: 'A', test: 'TEST-A', profit: 10, sales: 100, ratio: 1, returnRatio: 301 },
22      { date: '2020', type: 'A', test: 'TEST-A', profit: 30, sales: 3200, ratio: 2, returnRatio: 30 },
23      { date: '2021', type: 'A', test: 'TEST-A', profit: 30, sales: 300, ratio: 3, returnRatio: 303 },
24      { date: '2022', type: 'A', test: 'TEST-A', profit: 50, sales: 2400, ratio: 4, returnRatio: 34 },
25      { date: '2023', type: 'A', test: 'TEST-A', profit: 40, sales: 500, ratio: 5, returnRatio: 305 },
26      { date: '2019', type: 'A', test: 'TEST-D', profit: 10, sales: 100, ratio: 5, returnRatio: 30 },
27      { date: '2020', type: 'A', test: 'TEST-D', profit: 30, sales: 3200, ratio: 4, returnRatio: 302 },
28      { date: '2021', type: 'A', test: 'TEST-D', profit: 30, sales: 300, ratio: 3, returnRatio: 30 },
29      { date: '2022', type: 'A', test: 'TEST-D', profit: 50, sales: 2400, ratio: 2, returnRatio: 304 },
30      { date: '2023', type: 'A', test: 'TEST-D', profit: 40, sales: 500, ratio: 1, returnRatio: 35 },
31
32      { date: '2019', type: 'B', test: 'TEST-A', profit: 10, sales: 100, ratio: 11, returnRatio: 301 },
33      { date: '2020', type: 'B', test: 'TEST-A', profit: 30, sales: 3200, ratio: 12, returnRatio: 30 },
34      { date: '2021', type: 'B', test: 'TEST-A', profit: 30, sales: 300, ratio: 13, returnRatio: 303 },
35      { date: '2022', type: 'B', test: 'TEST-A', profit: 50, sales: 2400, ratio: 14, returnRatio: 34 },
36      { date: '2023', type: 'B', test: 'TEST-A', profit: 40, sales: 500, ratio: 15, returnRatio: 305 },
37      { date: '2019', type: 'B', test: 'TEST-D', profit: 10, sales: 100, ratio: 51, returnRatio: 30 },
38      { date: '2020', type: 'B', test: 'TEST-D', profit: 30, sales: 3200, ratio: 51, returnRatio: 32 },
39      { date: '2021', type: 'B', test: 'TEST-D', profit: 30, sales: 300, ratio: 52, returnRatio: 303 },
40      { date: '2022', type: 'B', test: 'TEST-D', profit: 50, sales: 2400, ratio: 5, returnRatio: 34 },
41      { date: '2023', type: 'B', test: 'TEST-D', profit: 40, sales: 500, ratio: 1, returnRatio: 35 },
42    ],
43    dualMeasures: [
44      {
45        primaryMeasures: [{ id: 'profit' }],
46        secondaryMeasures: [{ id: 'sales' }],
47      },
48      {
49        primaryMeasures: [{ id: 'ratio' }],
50        secondaryMeasures: [{ id: 'returnRatio' }],
51      },
52    ],
53  }
54  return <PivotChart vseed={vseed} />
55})

dualChartType

双轴图

1export const DualChartType = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    dualChartType: {
5      primary: 'area',
6      secondary: 'scatter',
7    },
8    dataset: [
9      { date: '2019', profit: 20, sales: 100 },
10      { date: '2020', profit: 30, sales: 600 },
11      { date: '2021', profit: 30, sales: 600 },
12      { date: '2022', profit: 50, sales: 500 },
13      { date: '2023', profit: 10, sales: 800 },
14    ],
15    measures: [
16      {
17        id: 'primary',
18        children: [{ id: 'sales', alias: '销售额' }],
19      },
20      {
21        id: 'secondary',
22        children: [{ id: 'profit', alias: '利润' }],
23      },
24    ],
25  }
26  return <VChartRender vseed={vseed} />
27})

组合双轴图

1export const DualChartTypeArray = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    dualChartType: [
5      {
6        primary: 'area',
7        secondary: 'scatter',
8      },
9      {
10        primary: 'column',
11        secondary: 'line',
12      },
13    ],
14    measures: [
15      {
16        id: 'first',
17        alias: '第一个双轴图',
18        children: [
19          {
20            id: 'secondary-profit',
21            children: [{ id: 'profit', alias: '利润' }],
22          },
23          {
24            id: 'primary-sales',
25            children: [{ id: 'sales', alias: '销售额' }],
26          },
27        ],
28      },
29      {
30        id: 'second',
31        alias: '第一个双轴图',
32        children: [
33          {
34            id: 'primary-ratio',
35            children: [{ id: 'ratio', alias: '比率' }],
36          },
37          {
38            id: 'returnRatio',
39            children: [{ id: 'returnRatio', alias: '回报率' }],
40          },
41        ],
42      },
43    ],
44    dataset: [
45      { date: '2019', profit: 10, sales: 100, ratio: 301, returnRatio: 301 },
46      { date: '2020', profit: 30, sales: 3200, ratio: 32, returnRatio: 30 },
47      { date: '2021', profit: 30, sales: 300, ratio: 103, returnRatio: 503 },
48      { date: '2022', profit: 50, sales: 2400, ratio: 30, returnRatio: 24 },
49      { date: '2023', profit: 40, sales: 500, ratio: 305, returnRatio: 305 },
50    ],
51    dimensions: [
52      {
53        id: 'date',
54        alias: '日期',
55      },
56    ],
57  }
58  return <PivotChart vseed={vseed} />
59})

primaryYAxis & secondaryYAxis

1export const DualYAxisArray = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'dualAxis',
4    primaryYAxis: [
5      {
6        title: {
7          visible: true,
8          titleText: '利润',
9        },
10      },
11      {
12        title: {
13          visible: true,
14          titleText: '比率',
15        },
16      },
17    ],
18    secondaryYAxis: [
19      {
20        title: {
21          visible: true,
22          titleText: '销售额',
23        },
24      },
25      {
26        title: {
27          visible: true,
28          titleText: '回报率',
29        },
30      },
31    ],
32    measures: [
33      {
34        id: 'first',
35        alias: '第一个双轴图',
36        children: [
37          {
38            id: 'secondary-profit',
39            children: [{ id: 'profit', alias: '利润' }],
40          },
41          {
42            id: 'primary-sales',
43            children: [{ id: 'sales', alias: '销售额' }],
44          },
45        ],
46      },
47      {
48        id: 'second',
49        alias: '第一个双轴图',
50        children: [
51          {
52            id: 'primary-ratio',
53            children: [{ id: 'ratio', alias: '比率' }],
54          },
55          {
56            id: 'returnRatio',
57            children: [{ id: 'returnRatio', alias: '回报率' }],
58          },
59        ],
60      },
61    ],
62    dataset: [
63      { date: '2019', profit: 10, sales: 100, ratio: 301, returnRatio: 301 },
64      { date: '2020', profit: 30, sales: 3200, ratio: 32, returnRatio: 30 },
65      { date: '2021', profit: 30, sales: 300, ratio: 103, returnRatio: 503 },
66      { date: '2022', profit: 50, sales: 2400, ratio: 30, returnRatio: 24 },
67      { date: '2023', profit: 40, sales: 500, ratio: 305, returnRatio: 305 },
68    ],
69    dimensions: [
70      {
71        id: 'date',
72        alias: '日期',
73      },
74    ],
75  }
76  return <PivotChart vseed={vseed} />
77})
目录