-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path12-混搭折线图和柱状图+双轴.html
132 lines (132 loc) · 3.09 KB
/
12-混搭折线图和柱状图+双轴.html
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="main" style="width:900px;height: 600px;"></div>
<script src="./js/echarts.min.js"></script>
<script>
let myCharts = echarts.init(document.getElementById('main'))
let option = {
title: {
text: '图表混搭-折线图和柱状图+双轴'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
dataZoom: { show: true },
restore: { show: true },
saveAsImage: { show: true },
magicType: { show: true, type: 'png' }
}
},
legend: {
data: ['蒸发量', '降水量', '平均温度']
},
// x轴的配置是一个数组 -> 数组中的每一个对象表示一条x轴的配置
xAxis: [
{
type: 'category',
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'
]
}
],
// y轴的配置是一个数组 -> 数组中的每一个对象表示一条y轴的配置
yAxis: [
{
type: 'value',
name: '水量',
axisLable: {
formatter: '{value}ml'
}
},
{
type: 'value',
name: '温度',
axisLable: {
formatter: '{value}℃'
}
}
],
series: [
{
name: '蒸发量',
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: '降水量',
type: 'bar',
data: [
2.6,
5.9,
9.8,
26.4,
28.7,
175.6,
78.7,
182.2,
48.7,
18.8,
6.0,
2.3
]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1, // yAxis坐标轴数组的索引，指定该系列数据所用的纵轴
data: [
2.0,
2.2,
3.3,
4.5,
6.6,
10.2,
20.3,
23.4,
22,
16.5,
12.0,
6.2
]
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>