代码
//图表需要的数据【时间数组、时间所对应的数据数组】
historyTime = equipHistory.times;
historyValue = equipHistory.values;
this.hisChart = this.$echart.init(
document.getElementById('historyData'),
'light'
);
this.hisChart.setOption({
grid: {
left: '1%',
top: '10%',
right: '2%',
bottom: '11%',
containLabel: true,
color: 'red'
},
tooltip: {
style: {
color: 'red'
}
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: { // x网格线
color: 'red'
}
},
axisLine: {
lineStyle: {
color: '#999fa8',
width: 1 // 这里是为了突出显示加上的
}
},
axisLabel: {
margin: 12,
textStyle: {
color: '#d3d8e2',
fontSize: '13'
}
},
labels: {
style: {
color: '#d3d8e2'
}
},
style: {
color: '#d3d8e2'
},
data: historyTime
},
yAxis: {
gridLineColor: '#3b4357',
gridLineWidth: 1,
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 12,
textStyle: {
color: '#d3d8e2',
fontSize: '13'
}
},
style: {
color: '#d3d8e2',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
},
title: {
style: {
color: '#d3d8e2',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
},
labels: {
style: {
color: '#d3d8e2'
}
},
splitLine: {
show: true,
lineStyle: { // x网格线
color: '#373f51'
}
}
},
// 图表时间轴滑块
dataZoom: [{
height: 30,
xAxisIndex: [0],
start: 0,
end: 10,
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',
handleSize: '110%',
handleStyle: {
color: '#3b4357',
shadowBlur: 3,
shadowColor: '#3b4357',
shadowOffsetX: 2,
shadowOffsetY: 2,
textStyle: {
color: '#d3d8e2'
}
},
style: {
color: '#d3d8e2'
},
borderColor: '240, 244, 255, 0.16',
color: 'red',
fontColor: 'red',
textStyle: {
color: '#d3d8e2'
}
},
{
type: 'inside',
start: 0,
end: 10,
height: 15
}
],
series: [{
data: historyValue,
type: 'line',
animation: false,
// showSymbol :false,
sampling: 'average', //降采样策略-明显优化拖动滚动条卡顿
smooth: false
}]
});