28跟我来一起精通echarts吧

Posted 2020-08-11 香港胖仔

1、折线图

 

 1 option = {
 2     title : {
 3         text: \'未来一周气温变化\',
 4         subtext: \'纯属虚构\'
 5     },
 6     tooltip : {
 7         trigger: \'axis\'
 8     },
 9     legend: {
10         data:[\'最高气温\',\'最低气温\']
11     },
12     toolbox: {
13         show : true,
14         feature : {
15             mark : {show: true},
16             dataView : {show: true, readOnly: false},
17             magicType : {show: true, type: [\'line\', \'bar\']},
18             restore : {show: true},
19             saveAsImage : {show: true}
20         }
21     },
22     calculable : true,
23     xAxis : [
24         {
25             type : \'category\',
26             boundaryGap : false,
27             data : [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\']
28         }
29     ],
30     yAxis : [
31         {
32             type : \'value\',
33             axisLabel : {
34                 formatter: \'{value} °C\'
35             }
36         }
37     ],
38     series : [
39         {
40             name:\'最高气温\',
41             type:\'line\',
42             data:[11, 11, 15, 13, 12, 13, 10],
43             itemStyle:{//这里可以定义折线的主颜色
44                 normal:{
45                     color:\'red\'
46                 }
47                   
48             },
49             markPoint : {
50                 data : [
51                     {type : \'max\', name: \'最大值\'},
52                     {type : \'min\', name: \'最小值\'}
53                 ]
54             },
55             markLine : {
56                 data : [
57                     {type : \'average\', name: \'平均值\'}
58                 ]
59             }
60         },
61         {
62             name:\'最低气温\',
63             type:\'line\',
64             data:[1, -2, 2, 5, 3, 2, 0],
65             markPoint : {
66                 data : [
67                     {name : \'周最低\', value : -2, xAxis: 1, yAxis: -1.5}
68                 ]
69             },
70             markLine : {
71                 data : [
72                     {type : \'average\', name : \'平均值\'}
73                 ]
74             }
75         }
76     ]
77 };
78