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
|
<!DOCTYPE html>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>ECharts Line Chart</
title
>
</
head
>
<
body
>
<
div
id
=
"main"
style
=
"width:100%;height:400px"
></
div
>
<
script
src
=
"dist/echarts-all.js"
></
script
>
<
script
type
=
"text/javascript"
>
var myChart = echarts.init(document.getElementById('main'),'macarons');
var option = {
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show : false,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: true},
magicType : {show: false, type: ['line', 'bar']},
restore : {show: false},
saveAsImage : {show: false}
}
},
calculable : false,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</
script
>
</
body
>
</
html
>
|
版权声明:原创作品,如需转载,请注明出处。否则将追究法律责任
本文转自 antlove 51CTO博客,原文链接:http://blog.51cto.com/antlove/1704806