1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react';
import { BasicChart } from '../index';
const Demo = () => {
// const colors = ['#5470C6', '#91CC75', '#EE6666'];
const option = {
// color: colors,
title: {
show: true,
text: '{prefix|}{t|今日供水量}{suffix|（单位：m）}',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
grid: {
right: '20%',
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true },
},
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature'],
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
],
yAxis: [
{
type: 'value',
// name: 'Evaporation',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
// lineStyle: {
// color: colors[0],
// },
},
axisLabel: {
formatter: '{value} ml',
},
},
{
type: 'value',
// name: 'Precipitation',
position: 'right',
alignTicks: true,
offset: 80,
axisLine: {
show: true,
// lineStyle: {
// color: colors[1],
// },
},
axisLabel: {
formatter: '{value} ml',
},
},
{
type: 'value',
// name: '温度',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
// lineStyle: {
// color: colors[2],
// },
},
axisLabel: {
formatter: '{value} °C',
},
},
],
series: [
{
name: 'Evaporation',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
},
{
name: 'Precipitation',
type: 'bar',
yAxisIndex: 1,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 2,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
},
],
};
return (
<div style={{ height: 300 }}>
<BasicChart option={option} theme="purple-passion" />
</div>
);
};
export default Demo;