ECharts图表-历史曲线

代码

//图表需要的数据【时间数组、时间所对应的数据数组】
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
    }]
});