ECharts图表-历史曲线

  1 //图表需要的数据【时间数组、时间所对应的数据数组】
  2 historyTime = equipHistory.times;
  3 historyValue = equipHistory.values;
  4 
  5 this.hisChart = this.$echart.init(
  6     document.getElementById(‘historyData‘),
  7     ‘light‘
  8 );
  9 
 10 this.hisChart.setOption({
 11     grid: {
 12         left: ‘1%‘,
 13         top: ‘10%‘,
 14         right: ‘2%‘,
 15         bottom: ‘11%‘,
 16         containLabel: true,
 17         color: ‘red‘
 18     },
 19     tooltip: {
 20         style: {
 21             color: ‘red‘
 22         }
 23     },
 24     xAxis: {
 25         type: ‘category‘,
 26         splitLine: {
 27             show: false,
 28             lineStyle: { // x网格线
 29                 color: ‘red‘
 30             }
 31         },
 32         axisLine: {
 33             lineStyle: {
 34                 color: ‘#999fa8‘,
 35                 width: 1 // 这里是为了突出显示加上的
 36             }
 37         },
 38         axisLabel: {
 39             margin: 12,
 40             textStyle: {
 41                 color: ‘#d3d8e2‘,
 42                 fontSize: ‘13‘
 43             }
 44         },
 45         labels: {
 46             style: {
 47                 color: ‘#d3d8e2‘
 48             }
 49         },
 50         style: {
 51             color: ‘#d3d8e2‘
 52         },
 53 
 54         data: historyTime
 55     },
 56     yAxis: {
 57         gridLineColor: ‘#3b4357‘,
 58         gridLineWidth: 1,
 59         type: ‘value‘,
 60         axisLine: {
 61             show: false
 62         },
 63         axisTick: {
 64             show: false
 65         },
 66         axisLabel: {
 67             margin: 12,
 68             textStyle: {
 69                 color: ‘#d3d8e2‘,
 70                 fontSize: ‘13‘
 71             }
 72         },
 73         style: {
 74             color: ‘#d3d8e2‘,
 75             fontWeight: ‘bold‘,
 76             fontSize: ‘12px‘,
 77             fontFamily: ‘Trebuchet MS, Verdana, sans-serif‘
 78         },
 79 
 80         title: {
 81             style: {
 82                 color: ‘#d3d8e2‘,
 83                 fontWeight: ‘bold‘,
 84                 fontSize: ‘12px‘,
 85                 fontFamily: ‘Trebuchet MS, Verdana, sans-serif‘
 86             }
 87         },
 88         labels: {
 89             style: {
 90                 color: ‘#d3d8e2‘
 91             }
 92         },
 93         splitLine: {
 94             show: true,
 95             lineStyle: { // x网格线
 96                 color: ‘#373f51‘
 97             }
 98         }
 99     },
100     // 图表时间轴滑块
101     dataZoom: [{
102             height: 30,
103             xAxisIndex: [0],
104             start: 0,
105             end: 10,
106             handleIcon: ‘path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z‘,
107             handleSize: ‘110%‘,
108             handleStyle: {
109                 color: ‘#3b4357‘,
110                 shadowBlur: 3,
111                 shadowColor: ‘#3b4357‘,
112                 shadowOffsetX: 2,
113                 shadowOffsetY: 2,
114                 textStyle: {
115                     color: ‘#d3d8e2‘
116                 }
117             },
118             style: {
119                 color: ‘#d3d8e2‘
120             },
121             borderColor: ‘240, 244, 255, 0.16‘,
122             color: ‘red‘,
123             fontColor: ‘red‘,
124             textStyle: {
125                 color: ‘#d3d8e2‘
126             }
127         },
128         {
129             type: ‘inside‘,
130             start: 0,
131             end: 10,
132             height: 15
133         }
134     ],
135     series: [{
136         data: historyValue,
137         type: ‘line‘,
138         animation: false,
139         // showSymbol :false,
140         sampling: ‘average‘, //降采样策略-明显优化拖动滚动条卡顿
141         smooth: false
142     }]
143 });