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 >