折线图

Echarts 效果图

image.png

Echarts 绘制折线图

闲话不多说,直接到观众老爷们最喜欢的上代码环节

js代码

data = [
    ['category', '单个任务体积'],
    ['2019-08-26', 811.123],
    ['2019-08-27', 628.103],
    ['2019-08-28', 422.714],
    ['2019-08-29', 512.275],
    ['2019-08-30', 623.74],
    ['2019-08-31', 712],
    ['2019-09-01', 521.456],
    ['2019-09-02', 612.338],
];

var option = {
    dataset: {
        source: data,
    },
    lineStyle: {
        color: '#00ffff',
    },
    title: {
        text: '单个任务体积=当前总体积数/当前总任务数量',
        left: 'right', //设置标题对其方式为左对齐
        textStyle: {
            // fontSize:14
        },
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            //当鼠标移动显示每个item
            return params.value[0] + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false,
        },
    },
    grid: {
        bottom: '15%',
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false,
        },
    },
    yAxis: {
        name: '单位(千方)',
        type: 'value',
        boundaryGap: [0, '100%'],
        min: 0,
        max: 1000,
        interval: 100,
        splitLine: {
            show: false,
        },
    },
    series: [
        {
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
        },
    ],
};