echarts realtime图实现

最近一直比较头疼，如何实现realtime图。总结一下需要解决以下问题：

1.如何传输自定义数据

2.数据要以什么格式传输

3.是否能够进行局部刷新，也就是ajax请求或者其他方式

4.同一页面上是否能够异步刷新不同的div，如果div多的话，会不会很慢

5.实现realtime图的机制是什么，是否可以自定制

一直研究的echarts前不久刚更新adddata的实时数据接口。所以自己单独抽出来做了个实验。源代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mix 2 个图表的效果</title>
<script src="js/esl.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
/**
实验 2个动态图展示，变化方式不同
*/
require.config({
packages:[
{
name:'echarts',
location:'echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'zrender-master/src',
main:'zrender'
}
]
});
var option1 = {title : {text: '上季度温度变化',subtext: '纯属虚构'},tooltip : {trigger: 'axis'},legend: {data:['平均气温']},calculable : true,xAxis : [{type : 'category',boundaryGap : false,data : (function(){var res = [];var len = 100;while (len--) {res.push(len + 1);}return res;})()}],yAxis : [{type : 'value',axisLabel : {formatter: '{value} °C'},splitArea : {show : true}}],series : [{name:'平均气温',type:'line',smooth:false,itemStyle: {normal: {color:'#00fa9a',areaStyle: {shadowColor : 'rgba(0,0,0,0.4)'}}},data:dataXRand()}]
};
var option2 = {title : {text: '本季度温度变化化',subtext: '纯属虚构'},tooltip : {trigger: 'axis'},legend: {data:['最高气温']},calculable : true,xAxis : [{type : 'category',boundaryGap : false,data : (function(){var res = [];var len = 100;while (len--) {res.push(len + 1);}return res;})()}],yAxis : [{type : 'value',axisLabel : {formatter: '{value} °C'},splitArea : {show : true}}],series : [{name:'最高气温',type:'line',smooth:false,itemStyle: {normal: {areaStyle: {shadowColor : 'rgba(0,0,0,0.4)'}}},data:dataXRand()}]
};
var myChart1;
var myChart2;
require(
[
'echarts',
'echarts/chart/line'
],
function(ec){
myChart1=ec.init(document.getElementById('main1'));
myChart1.setOption(option1);
var timeTicket1;
clearInterval(timeTicket1);
timeTicket1 = setInterval(function(){
RandANum1(ec);
}, 300);
myChart2=ec.init(document.getElementById('main2'));
myChart2.setOption(option2);
var timeTicket2;
clearInterval(timeTicket2);
timeTicket2 = setInterval(function(){
RandANum2(ec);
}, 100);
}
)
function RandANum1(ec){$.ajax({
url:"./control/AjaxService.php?method=RandANum",
dataType:"text",
success:function(data)
{Rdata=eval(data);myChart1.addData([[0,    // 系列索引Rdata, // 新增数据false,  // 新增数据是否从队列头部插入false,  // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头// axisData // 坐标轴标签]]);
}
});
}
function RandANum2(ec){$.ajax({
url:"./control/AjaxService.php?method=RandANum2",
dataType:"text",
success:function(data)
{Rdata=eval(data);myChart2.addData([[0,    // 系列索引Rdata, // 新增数据false,  // 新增数据是否从队列头部插入false,  // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头// axisData // 坐标轴标签]]);
}
});
}
function dataXRand(){
var dataarr=new Array();
$.ajax({
url:"./control/AjaxService.php?method=RandTest",
dataType:"text",
success:function(data)
{var ss=eval(data);for(var i=0;i<ss.length;i++){
dataarr.push(ss[i]);//alert(dataarr[i]);}
}
});
return dataarr;
}
</script>
</head>
<body>
<div id="main1" style="height:220px; border:1px solid #ccc; padding:10px;"></div>
<div id="main2" style="height:220px; border:1px solid #ccc; padding:10px;"></div>
</body>
</html>

针对上述5个问题的回答如下：

数据可以存在数据库或者在线，as you like，可以通过AJAX或者jquery库等获得JSON数据然后转成数组,传输给echarts。一般最常用的是json格式。不管是ajax、jsonp甚至websocket都可以作为获取数据的方式，这是数据层面的事情不会附加到图表中，你当然可以通过ajax获取数据后展现，我们的实际应用中基本都是ajax数据~图表提供了loading方法用于获取数据时作为过渡显示~

实时图数据一般不会从数据库里面读取，所以用php做了一个随机数的生成函数。代码很简单不解释。效果图如下：

下面的文章会贴上实现的具体代码。

转载于:https://blog.51cto.com/baigungun/1303455

echarts realtime图实现相关推荐

Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts混合图、省份地图、中国地图、环形图
最近工作上用到的几种echarts图表样例,在此记录下: <!DOCTYPE html> <html lang="en"> <head> ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
html5 尾迹特效,如何设置ECharts线图的特效
您可以使用 ECharts 线图的 effect 属性来贵线特效进行配置,可以参考示例模拟迁徙和北京公交路线. 注意: 所有带有尾迹特效的图表需要单独放在一个层,也就是需要单独设置zlevel, ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 环状图中添加图片
echarts 环状图中添加图片由于业务需要,我们可以在饼图内加入图片.图标或文字等让单调的饼图变得美观,这里我是在环状图里添加图片. 代码如下: option = {graphic: {//图形中 ...
echarts 仪表盘图展示百分比
echarts 仪表盘图展示百分比效果图如下: 背景图一加,效果就好看多了代码: let myChart = echarts.getInstanceByDom(document.getElemen ...

echarts realtime图实现

echarts realtime图实现相关推荐

最新文章

热门文章