ECharts3 实现动态数据累积图2+时间坐标
2017-09-21 23:28
411 查看
对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。
可在ECharts3实例中的代码框中粘贴直接查看效果。
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: '动态数据 + 时间坐标轴' }, tooltip: { trigger: 'axis', formatter: function (params) { params = params[0]; var date = new Date(params.name); return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; }, axisPointer: { animation: false } }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '模拟数据', type: 'line', showSymbol: false, hoverAnimation: false, data: data }] }; setInterval(function () { //data.shift(); data.push(randomData()); myChart.setOption({ series: [{ data: data }] }); }, 1000);
相关文章推荐
- ECharts3 实现数据动态更新3+时间坐标,数据累积
- ECharts关于“动态数据+时间坐标轴”的问题
- 长连接与echarts实现动态数据实时展示
- Echarts折线图绑定动态数据 x轴当前时间 y轴百分比刻度 toolbox使用
- TP框架实现echarts动态获取数据
- DAO类+通用持久类+通用动态formBean类,实现数据增、删、改、查newxy(新坐标)技术运用之三
- echarts实现动态传入数据刷新【可执行】
- [Echarts可视化] php和ajax连接数据库实现动态数据可视化
- AngularJS+Echarts利用Ajax实现数据动态刷新
- ASP.NET+JQuery+.Ashx实现+百度Echarts 实现动态柱状图数据图形报表的统计
- echarts引用本地文件,动态传数据时只要显示坐标轴
- 关于Echarts中formatter实现动态数据的方法
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
- Echarts通过Ajax实现动态数据加载
- Echarts通过Ajax实现动态数据加载
- echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计
- Echarts实现饼状图数据动态加载
- Echarts通过Ajax实现动态数据加载