数据可视化演示效果:Echarts动态更新(官方标准)

简介: 数据可视化演示效果:Echarts动态更新(官方标准)
var base = +new Date(2019, 5, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
    date.push(now);
    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
    if (shift) {
        date.shift();
        data.shift();
    }
    now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 12; i++) {
    addData();
}
option = {
    title : {
        text: '某地区蒸发量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量']
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : date
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:data,
        }
    ]
};
setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'蒸发量',
            data: data
        }]
    });
}, 5000);
相关文章
|
3月前
|
数据可视化
为什么Echarts数据可视化大屏不好做?
为什么Echarts数据可视化大屏不好做?
|
3月前
|
数据可视化 JavaScript
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
|
3月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
|
3月前
|
数据可视化
动漫形象平台 Echarts数据可视化大屏
动漫形象平台 Echarts数据可视化大屏
|
3月前
|
数据可视化
为什么不建议你拿下Echarts数据可视化?
为什么不建议你拿下Echarts数据可视化?
|
3月前
|
数据可视化
Echarts数据可视化开发| 移动效能平台附源码
Echarts数据可视化开发| 移动效能平台附源码
|
3月前
|
数据可视化
为什么不建议大家冲一冲Echarts数据可视化,不要太香了
为什么不建议大家冲一冲Echarts数据可视化,不要太香了
|
3月前
|
数据可视化 前端开发 大数据
Echarts数据可视化大屏展示页(附源码一键搞定)
Echarts数据可视化大屏展示页(附源码一键搞定)
|
3月前
|
数据可视化
Echarts数据可视化开发| 智慧数据平台
Echarts数据可视化开发| 智慧数据平台
|
3月前
|
数据可视化
Echarts数据可视化开发| 智慧营业厅
Echarts数据可视化开发| 智慧营业厅