echarts 线图动态增加数据同时更新x轴min和max，datazoom后无法自动follow数据，需要手动拖动一次。ECharts Gallery

20:11:45图表已生成

代码

function randomData() {
    now = new Date(+now + one);
    value = value + Math.random() * 21 - 10;
    min = min + one;
    max = max + one;
    if (value > 1000) {
        value = 1000;
    }
    if (value < 1) {
        value = 1;
    }
    return {
        name: now.toString(),
        value: [
            now,
            Math.round(value)
        ]
    }
}

var data = [];
var min = 0;
var max = 0;
var now = new Date();
var one = 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 60; i++) {
    data.push(randomData());
}
var first = new Date(data[0].value[0]).getTime()
var last = new Date(data[data.length - 1].value[0]).getTime()
min = first - 30 * 1000;
max = last + 30 * 1000;



option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return params.name;
        },
        axisPointer: {
            animation: false
        }
    },
    dataZoom: {
        type: 'inside',
        filterMode: 'filter',
        orient: 'horizontal',
        xAxisIndex: [0],
    },
    xAxis: {
        type: 'time',
        min: new Date(min),
        max: new Date(max),
    },
    yAxis: {
        type: 'value',
        min: function(value) {
            return value.min - 5;
        },
        max: function(value) {
            return value.max + 5;
        },
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};
option.dataZoom.startValue = first - 15 *1000;
option.dataZoom.endValue = last + 15 *1000;
setInterval(function () {

    for (var i = 0; i < 1; i++) {
        //data.shift();
        data.push(randomData());
    }

    myChart.setOption({
        xAxis: {
       
            min: new Date(min),
            max: new Date(max),
        },
        series: [{
            data: data
        }]
    });
}, 1000);

作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品