配置双轴图指标
度量不设置encoding 的时候，第一个指标应用于主轴, 第二个指标及其之后的指标, 一起应用于次轴. 绘制一个普通双轴图.
通过设置 parentId 实现指标分组，展示在不同的视图中
1export const SimpleDualAxisChart = 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})1export const DualAxisChart = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'dualAxis',
4 measures: [
5 { id: 'sales', alias: '销售额', encoding: 'primaryYAxis' },
6 { id: 'profit', alias: '利润', encoding: 'secondaryYAxis' },
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})1export const CombinationDualAxisChart = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'dualAxis',
4 measures: [
5 { id: 'profit', alias: '利润', encoding: 'primaryYAxis', parentId: 'first' },
6 { id: 'sales', alias: '销售额', encoding: 'secondaryYAxis', parentId: 'first' },
7 { id: 'ratio', alias: '比率', encoding: 'primaryYAxis', parentId: 'second' },
8 { id: 'returnRatio', alias: '回报率', encoding: 'secondaryYAxis', parentId: 'second' },
9 ],
10 dataset: [
11 { date: '2019', profit: 10, sales: 100, ratio: 301, returnRatio: 301 },
12 { date: '2020', profit: 30, sales: 3200, ratio: 32, returnRatio: 30 },
13 { date: '2021', profit: 30, sales: 300, ratio: 103, returnRatio: 503 },
14 { date: '2022', profit: 50, sales: 2400, ratio: 30, returnRatio: 24 },
15 { date: '2023', profit: 40, sales: 500, ratio: 305, returnRatio: 305 },
16 ],
17 dimensions: [
18 {
19 id: 'date',
20 alias: '日期',
21 },
22 ],
23 }
24 return <PivotChart vseed={vseed} />
25})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 measures: [
44 { id: 'profit', alias: '利润', encoding: 'primaryYAxis', parentId: 'first' },
45 { id: 'sales', alias: '销售额', encoding: 'secondaryYAxis', parentId: 'first' },
46 { id: 'ratio', alias: '比率', encoding: 'primaryYAxis', parentId: 'second' },
47 { id: 'returnRatio', alias: '回报率', encoding: 'secondaryYAxis', parentId: 'second' },
48 ],
49 }
50 return <PivotChart vseed={vseed} />
51})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 { id: 'sales', alias: '销售额', encoding: 'primaryYAxis' },
17 { id: 'profit', alias: '利润', encoding: 'secondaryYAxis' },
18 ],
19 }
20 return <VChartRender vseed={vseed} />
21})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 { id: 'profit', alias: '利润', encoding: 'primaryYAxis', parentId: 'first' },
16 { id: 'sales', alias: '销售额', encoding: 'secondaryYAxis', parentId: 'first' },
17 { id: 'ratio', alias: '比率', encoding: 'primaryYAxis', parentId: 'second' },
18 { id: 'returnRatio', alias: '回报率', encoding: 'secondaryYAxis', parentId: 'second' },
19 ],
20 dataset: [
21 { date: '2019', profit: 10, sales: 100, ratio: 301, returnRatio: 301 },
22 { date: '2020', profit: 30, sales: 3200, ratio: 32, returnRatio: 30 },
23 { date: '2021', profit: 30, sales: 300, ratio: 103, returnRatio: 503 },
24 { date: '2022', profit: 50, sales: 2400, ratio: 30, returnRatio: 24 },
25 { date: '2023', profit: 40, sales: 500, ratio: 305, returnRatio: 305 },
26 ],
27 dimensions: [
28 {
29 id: 'date',
30 alias: '日期',
31 },
32 ],
33 }
34 return <PivotChart vseed={vseed} />
35})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 { id: 'profit', alias: '利润', encoding: 'primaryYAxis', parentId: 'first' },
34 { id: 'sales', alias: '销售额', encoding: 'secondaryYAxis', parentId: 'first' },
35 { id: 'ratio', alias: '比率', encoding: 'primaryYAxis', parentId: 'second' },
36 { id: 'returnRatio', alias: '回报率', encoding: 'secondaryYAxis', parentId: 'second' },
37 ],
38 dataset: [
39 { date: '2019', profit: 10, sales: 100, ratio: 301, returnRatio: 301 },
40 { date: '2020', profit: 30, sales: 3200, ratio: 32, returnRatio: 30 },
41 { date: '2021', profit: 30, sales: 300, ratio: 103, returnRatio: 503 },
42 { date: '2022', profit: 50, sales: 2400, ratio: 30, returnRatio: 24 },
43 { date: '2023', profit: 40, sales: 500, ratio: 305, returnRatio: 305 },
44 ],
45 dimensions: [
46 {
47 id: 'date',
48 alias: '日期',
49 },
50 ],
51 }
52 return <PivotChart vseed={vseed} />
53})