1export const ColumnPercentXAxis = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnPercent',
4 xAxis: {
5 labelAutoHide: false,
6 labelAutoLimit: false,
7 labelAutoRotate: false,
8 labelAutoHideGap: 0,
9 labelAutoLimitLength: 0,
10 labelAutoRotateAngleRange: [],
11 line: {
12 visible: false,
13 },
14 label: {
15 visible: false,
16 },
17 grid: {
18 visible: false,
19 },
20 tick: {
21 visible: false,
22 },
23 title: {
24 visible: false,
25 },
26 },
27 label: {
28 enable: false,
29 },
30 dataset: [
31 { date: '2019-01-01', profit: 10, sales: 20 },
32 { date: '2019-01-02', profit: 30, sales: 60 },
33 { date: '2019-01-03', profit: 30, sales: 60 },
34 { date: '2019-01-04', profit: 50, sales: 100 },
35 { date: '2019-01-05', profit: 40, sales: 80 },
36 { date: '2019-01-06', profit: 10, sales: 20 },
37 { date: '2019-01-07', profit: 30, sales: 60 },
38 { date: '2019-01-08', profit: 30, sales: 60 },
39 { date: '2019-01-09', profit: 50, sales: 100 },
40 { date: '2019-01-10', profit: 40, sales: 80 },
41 { date: '2019-01-11', profit: 10, sales: 20 },
42 { date: '2019-01-12', profit: 30, sales: 60 },
43 { date: '2019-01-13', profit: 30, sales: 60 },
44 { date: '2019-01-14', profit: 50, sales: 100 },
45 { date: '2019-01-15', profit: 40, sales: 80 },
46 { date: '2019-01-16', profit: 10, sales: 20 },
47 { date: '2019-01-17', profit: 30, sales: 60 },
48 { date: '2019-01-18', profit: 30, sales: 60 },
49 { date: '2019-01-19', profit: 50, sales: 100 },
50 { date: '2019-01-20', profit: 40, sales: 80 },
51 { date: '2019-01-21', profit: 10, sales: 20 },
52 { date: '2019-01-22', profit: 30, sales: 60 },
53 { date: '2019-01-23', profit: 30, sales: 60 },
54 { date: '2019-01-24', profit: 50, sales: 100 },
55 { date: '2019-01-25', profit: 40, sales: 80 },
56 { date: '2019-01-26', profit: 10, sales: 20 },
57 { date: '2019-01-27', profit: 30, sales: 60 },
58 { date: '2019-01-28', profit: 30, sales: 60 },
59 { date: '2019-01-29', profit: 50, sales: 100 },
60 { date: '2019-01-30', profit: 40, sales: 80 },
61 { date: '2019-01-31', profit: 10, sales: 20 },
62 { date: '2019-02-01', profit: 30, sales: 60 },
63 { date: '2019-02-02', profit: 30, sales: 60 },
64 { date: '2019-02-03', profit: 50, sales: 100 },
65 { date: '2019-02-04', profit: 40, sales: 80 },
66 { date: '2019-02-05', profit: 10, sales: 20 },
67 { date: '2019-02-06', profit: 30, sales: 60 },
68 { date: '2019-02-07', profit: 30, sales: 60 },
69 { date: '2019-02-08', profit: 50, sales: 100 },
70 { date: '2019-02-09', profit: 40, sales: 80 },
71 { date: '2019-02-10', profit: 10, sales: 20 },
72 { date: '2019-02-11', profit: 30, sales: 60 },
73 { date: '2019-02-12', profit: 30, sales: 60 },
74 { date: '2019-02-13', profit: 50, sales: 100 },
75 { date: '2019-02-14', profit: 40, sales: 80 },
76 { date: '2019-02-15', profit: 10, sales: 20 },
77 { date: '2019-02-16', profit: 30, sales: 60 },
78 { date: '2019-02-17', profit: 30, sales: 60 },
79 { date: '2019-02-18', profit: 50, sales: 100 },
80 { date: '2019-02-19', profit: 40, sales: 80 },
81 { date: '2019-02-20', profit: 10, sales: 20 },
82 { date: '2019-02-21', profit: 30, sales: 60 },
83 { date: '2019-02-22', profit: 30, sales: 60 },
84 { date: '2019-02-23', profit: 50, sales: 100 },
85 { date: '2019-02-24', profit: 40, sales: 80 },
86 { date: '2019-02-25', profit: 10, sales: 20 },
87 { date: '2019-02-26', profit: 30, sales: 60 },
88 { date: '2019-02-27', profit: 30, sales: 60 },
89 { date: '2019-02-28', profit: 50, sales: 100 },
90 ],
91 }
92 return <VChartRender vseed={vseed} />
93})1export const ColumnPercentXAxisEnable = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnPercent',
4 xAxis: {
5 labelAutoHide: true,
6 labelAutoLimit: true,
7 labelAutoRotate: true,
8 labelAutoHideGap: 5,
9 labelAutoLimitLength: 100,
10 labelAutoRotateAngleRange: [0, -45, -90],
11 line: {
12 visible: true,
13 lineColor: '#606773',
14 lineWidth: 2,
15 },
16 label: {
17 visible: true,
18 labelColor: '#606773',
19 labelFontSize: 12,
20 labelFontWeight: 500,
21 labelAngle: 0,
22 },
23 grid: {
24 visible: true,
25 gridColor: '#606773',
26 gridWidth: 2,
27 },
28 tick: {
29 visible: true,
30 tickColor: '#606773',
31 tickInside: true,
32 tickSize: 10,
33 },
34 title: {
35 visible: true,
36 titleText: '日期',
37 titleColor: '#606773',
38 titleFontSize: 12,
39 titleFontWeight: 500,
40 },
41 },
42 label: {
43 enable: false,
44 },
45 dataset: [
46 { date: '2019-01-01', profit: 10, sales: 20 },
47 { date: '2019-01-02', profit: 30, sales: 60 },
48 { date: '2019-01-03', profit: 30, sales: 60 },
49 { date: '2019-01-04', profit: 50, sales: 100 },
50 { date: '2019-01-05', profit: 40, sales: 80 },
51 { date: '2019-01-06', profit: 10, sales: 20 },
52 { date: '2019-01-07', profit: 30, sales: 60 },
53 { date: '2019-01-08', profit: 30, sales: 60 },
54 { date: '2019-01-09', profit: 50, sales: 100 },
55 { date: '2019-01-10', profit: 40, sales: 80 },
56 { date: '2019-01-11', profit: 10, sales: 20 },
57 { date: '2019-01-12', profit: 30, sales: 60 },
58 { date: '2019-01-13', profit: 30, sales: 60 },
59 { date: '2019-01-14', profit: 50, sales: 100 },
60 { date: '2019-01-15', profit: 40, sales: 80 },
61 { date: '2019-01-16', profit: 10, sales: 20 },
62 { date: '2019-01-17', profit: 30, sales: 60 },
63 { date: '2019-01-18', profit: 30, sales: 60 },
64 { date: '2019-01-19', profit: 50, sales: 100 },
65 { date: '2019-01-20', profit: 40, sales: 80 },
66 { date: '2019-01-21', profit: 10, sales: 20 },
67 { date: '2019-01-22', profit: 30, sales: 60 },
68 { date: '2019-01-23', profit: 30, sales: 60 },
69 { date: '2019-01-24', profit: 50, sales: 100 },
70 { date: '2019-01-25', profit: 40, sales: 80 },
71 { date: '2019-01-26', profit: 10, sales: 20 },
72 { date: '2019-01-27', profit: 30, sales: 60 },
73 { date: '2019-01-28', profit: 30, sales: 60 },
74 { date: '2019-01-29', profit: 50, sales: 100 },
75 { date: '2019-01-30', profit: 40, sales: 80 },
76 { date: '2019-01-31', profit: 10, sales: 20 },
77 { date: '2019-02-01', profit: 30, sales: 60 },
78 { date: '2019-02-02', profit: 30, sales: 60 },
79 { date: '2019-02-03', profit: 50, sales: 100 },
80 { date: '2019-02-04', profit: 40, sales: 80 },
81 { date: '2019-02-05', profit: 10, sales: 20 },
82 { date: '2019-02-06', profit: 30, sales: 60 },
83 { date: '2019-02-07', profit: 30, sales: 60 },
84 { date: '2019-02-08', profit: 50, sales: 100 },
85 { date: '2019-02-09', profit: 40, sales: 80 },
86 { date: '2019-02-10', profit: 10, sales: 20 },
87 { date: '2019-02-11', profit: 30, sales: 60 },
88 { date: '2019-02-12', profit: 30, sales: 60 },
89 { date: '2019-02-13', profit: 50, sales: 100 },
90 { date: '2019-02-14', profit: 40, sales: 80 },
91 { date: '2019-02-15', profit: 10, sales: 20 },
92 { date: '2019-02-16', profit: 30, sales: 60 },
93 { date: '2019-02-17', profit: 30, sales: 60 },
94 { date: '2019-02-18', profit: 50, sales: 100 },
95 { date: '2019-02-19', profit: 40, sales: 80 },
96 { date: '2019-02-20', profit: 10, sales: 20 },
97 { date: '2019-02-21', profit: 30, sales: 60 },
98 { date: '2019-02-22', profit: 30, sales: 60 },
99 { date: '2019-02-23', profit: 50, sales: 100 },
100 { date: '2019-02-24', profit: 40, sales: 80 },
101 { date: '2019-02-25', profit: 10, sales: 20 },
102 { date: '2019-02-26', profit: 30, sales: 60 },
103 { date: '2019-02-27', profit: 30, sales: 60 },
104 { date: '2019-02-28', profit: 50, sales: 100 },
105 ],
106 }
107 return <VChartRender vseed={vseed} />
108})