数据可视化演示效果: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);
相关文章
|
2月前
|
数据可视化 JavaScript 前端开发
基于Echarts构建停车场数据可视化大屏
基于Echarts构建停车场数据可视化大屏
71 0
|
2月前
|
存储 数据可视化 JavaScript
基于Echarts构建大数据招聘岗位数据可视化大屏
基于Echarts构建大数据招聘岗位数据可视化大屏
60 0
|
3月前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
25 0
|
4月前
|
资源调度 数据可视化 JavaScript
完全入门ECharts:在UniApp中快速实现数据可视化
在开发过程中,我们经常需要使用到数据可视化工具来展示数据,而 ECharts 是一款非常流行的数据可视化工具,它可以帮助我们快速地创建所需的图表。在这篇博客中,我们将介绍如何在 Uniapp 中使用
296 0
|
6月前
|
Web App开发 数据可视化 前端开发
前端数据可视化之【Echarts介绍】
前端数据可视化之【Echarts介绍】
97 0
|
9月前
|
数据可视化 JavaScript 定位技术
漏刻有时数据可视化Echarts组件开发(27):端午地图粽情之你的家乡吃甜还是吃咸?
漏刻有时数据可视化Echarts组件开发(27):端午地图粽情之你的家乡吃甜还是吃咸?
102 0
漏刻有时数据可视化Echarts组件开发(27):端午地图粽情之你的家乡吃甜还是吃咸?
|
9月前
|
存储 JSON 数据可视化
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
459 0
|
9月前
|
存储 JSON 数据可视化
数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)
数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)
436 0
|
9月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
397 0
|
9月前
|
编解码 监控 数据可视化
数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API、Echarts、百度地图)
数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API、Echarts、百度地图)
215 0