ECharts3 implements the operation of dynamic data + time axis-JS Tutorial-php.cn

ECharts3 implements the operation of dynamic data + time axis

一个新手

Release： 2017-09-22 09:38:26

Original

10881 people have browsed it

ECharts3 implements the operation of dynamic data + time axis
The dynamic data + time coordinate axis instance in the ECharts3 official website has been modified. The X-axis is the current time, and the data is accumulated.

You can paste it in the code box in the ECharts3 instance to see the effect directly.

function randomData() {
    now = new Date(+now + 1000);
    value = value + Math.random() * 21 - 10;    
    return {
        name: now.toString(),
        value: [
            now,            
            Math.round(value)
        ]
    }
}var data = [];var now = new Date();var value = Math.random() * 1000;

option = {
    title: {
        text: &#39;动态数据 + 时间坐标轴&#39;
    },
    tooltip: {
        trigger: &#39;axis&#39;,
        formatter: function (params) {
            params = params[0];            
            var date = new Date(params.name);            
            return date.getDate() + &#39;/&#39; + (date.getMonth() + 1) + &#39;/&#39; + date.getFullYear() + &#39; : &#39; + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: &#39;time&#39;,
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: &#39;value&#39;,
        boundaryGap: [0, &#39;100%&#39;],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: &#39;模拟数据&#39;,
        type: &#39;line&#39;,
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};
setInterval(function () {
        //data.shift();
        data.push(randomData());
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

Copy after login

The above is the detailed content of ECharts3 implements the operation of dynamic data + time axis. For more information, please follow other related articles on the PHP Chinese website!