echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事。没办法,谁让我今天没事可做呢。
昨天需求是动态加载数据,画一个实时监控的折线图。大概长这样。
我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现了。这难道是站长为了考研我?本着搬运工的精神,我开始百度起来。
最近可能百度忙着打官司,搜到的全是陈年烂谷。没办法,自己弄吧。可是项目主管不懂啊,他以为这个东西很简单嘛,网上一搜一大把,一个劲儿催。我就cltm了。但是问题还是要解决的。官网的错误代码我就不占了,有兴趣的可以到这里看http://echarts.baidu.com/demo.html#dynamic-data2
下面贴上我的代码,还有说明
1.首先官网上的代码没有实例化。
var myChart = echarts.init(document.getElementById('z_line2'));
2.核心配置bug就是这里,修改成这样就好了
原版
setInterval(function () { for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
} myChart.setOption({
series: [{
data: data
}]
});
}, 1000);
我的
setInterval(function () {
for (var i = 0; i < 5; i++) {
//data.shift();
data.push(randomData());
}
//data.push(randomData());
myChart.setOption(option);//核心价值观,更快更高更强!
}, 1000);
最后附上完整的:
//开始❀折线图
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
}
} var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
var option='';
/*for (var i = 0; i < 1000; i++) {
data.push(randomData());
}*/
data.push(randomData());
var myChart = echarts.init(document.getElementById('z_line2'));
option = {
title: {
bottom:0,
left:'center',
text: '现价',
textStyle:{
color:'#5e5e5e'
}
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
console.log(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
},
nameGap:3600,
axisLine: {lineStyle: {color: '#5e5e5e'}},
axisLabel: {//坐标轴文本样式
textStyle: {
color: "#5e5e5e",
},
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
axisLine: {lineStyle: {color: '#5e5e5e'}},
axisLabel: {//坐标轴文本样式
textStyle: {
color: "#5e5e5e",
},
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
}],
dataZoom:{
type:'inside'
},
backgroundColor:'#ccc'
}; setInterval(function () {
for (var i = 0; i < 5; i++) {
//data.shift();
data.push(randomData());
}
//data.push(randomData());
myChart.setOption(option);
}, 1000);
echarts官网上的动态加载数据bug被我解决。咳咳/。的更多相关文章
- 【转】Echarts的使用以及动态加载数据
一.Echarts的介绍 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新 ...
- AppCan学习笔记----关闭页面listview动态加载数据
AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- 微信小程序(五) 利用模板动态加载数据
利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: Source Code 上图中,有一行代码: <tbody ...
- js实现滚动条来动态加载数据
主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- js动态加载数据并合并单元格
js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...
随机推荐
- derby数据库windows自带的客户端
本示例演示用windows自带的ij来操作derby数据库,包括建库,建表,插入数据,查询数据 首先要配置环境变量: 其次打开cmd输入如下图所示的命令: java代码如下: package com. ...
- Linux(CentOS6.7) 安装MySql5.7数据库 图文教程
linux(CentOS6.7) 环境Mysql 5.7.17安装教程分享给大家,供大家参考,具体内容如下: 1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/ ...
- [Coding Practice] Maximum number of zeros in NxN matrix
Question: Input is a NxN matrix which contains only 0′s and 1′s. The condition is no 1 will occur in ...
- 任务调度 Quartz 学习(二) CronTrigger
在Quartz中Trigger有 SimpleTrigger与CronTrigger两种: SimpleTrigger:当需要的是一次性的调度(仅是安排单独的任务在指定的时间及时执行),或者你需要在指 ...
- POJ 3061 Subsequence ( 尺取法)
题目链接 Description A sequence of N positive integers (10 < N < 100 000), each of them less than ...
- vue数组操作不触发前端重新渲染
暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决. 此外,能够监听的数组变异方法 https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC% ...
- niceScroll 简单使用 及 插件API
官方网址[https://nicescroll.areaaperta.com/] 注:效果见官网右侧滚动条 jquery.nicescroll文件下载地址 引入核心文件,插件需要引入1.5.X以上版 ...
- android隐藏EditText光标
在android中如果有EditText,那么在载入时,光标会默认显示在第一个EditText框中,如果不想显示光标,且也不想把该光标移动到下一个EditText框,最简单的方法是在该 EditTex ...
- 【OneNote】使用线性格式输入数学公式
在OneNote中按Alt+=,就可以开始输入公式. # 对齐公式数组 可以使用@和&来实现,如 \eqarray(x+1&=2@1+2+3+y&=z@3/x&=6)& ...
- 【转】CVE-2010-4258 漏洞分析
一. 漏洞简介 CVE-2010-4258这个漏洞很有意思,主要思路是如果通过clone函数去创建进程,并且带有CLONE_CHILD_CLEARTID标志,那么进程在退出的时候,可以造成内核任意地址 ...