用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图，柱形图等等的效果和速度都很好。下面我们介绍 怎么把封装的数据列表解析出来，动态绘图，并且实现鼠标联动效果
引入js文件:
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script><script type="text/javascript" src="js/echarts.js"></script>
css样式：
#main{min-height:200px;max-height:4010px;margin:0 auto;overflow:overlay; white-space:nowrap;position: relative;}页面元素：
<div style="background: red;height: 20px;width: 100px" id="come">开始点击</div><div id="main"></div>
js造假数据: 可以模仿后台封装数据
var a=[{"F_X":["2017-3-1","2017-3-15","2017-4-1","2017-4-12","2017-5-21","2017-6-5","2017-8-12","2017-9-1","2017-10-11"],"F_Y":[{"name":"温度","type":"line","symbol":"emptycircle","data":["23","56","32","41","32","45","39","47","58"]},{"name":"压强","type":"line","symbol":"emptycircle","data":["233","345","322","251","342","350","233","279","228"]}],"F_Z":"A"},{"F_X":["2017-3-1","2017-3-15","2017-4-1","2017-4-12","2017-5-21","2017-6-5","2017-8-12","2017-9-1","2017-10-11"],"F_Y":[{"name":"温度","type":"line","symbol":"emptycircle","data":["34","45","32","25","57","45","39","47","58"]},{"name":"压强","type":"line","symbol":"emptycircle","data":["345","345","322","251","373","350","290","279","228"]}],"F_Z":"B"},{"F_X":["2017-3-1","2017-3-15","2017-4-1","2017-4-12","2017-5-21","2017-6-5","2017-8-12","2017-9-1","2017-10-11"],"F_Y":[{"name":"温度","type":"line","symbol":"emptycircle","data":["23","56","32","25","57","45","39","47","58"]},{"name":"压强","type":"line","symbol":"emptycircle","data":["33","45","32","51","73","50","90","79","48"]}],"F_Z":"C"}];js 开始部分：
require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}}); $("#come").click(function(){var div1='<div class="jin" style="height:150px;background: blue;"></div>';var sv="", //动态生成名称mdataeahars=[]; //创建一个echarts对象集合$.each(a,function(i,t){$("#main").append(div1); //添加生成图的元素sv="myChart"+i;youjin(i,t,sv,mdataeahars,a.length); }); var time2= setInterval(function(){if(mdataeahars.length==a.length){ var sokf; // 接临时删除的数据$.each(mdataeahars,function(i,t){if(mdataeahars.length==a.length){sokf=mdataeahars[0];var em=arydlt(mdataeahars[0],mdataeahars);mdataeahars.push(sokf);linkage(mdataeahars[mdataeahars.length-1],em); } });clearInterval(time2) ;}},500) });上面这段代码中，有个监听方法，之所以这么搞，是因为这是联动的核心方法，它把多个独立的初始化之后的echarts对象，用数组装起来，然后用linkage（）逐一去分配；用connect方法把除了自身对象之外的数组联动起来，这样就形成动态的相互关联；本方法中有个splice(i, 1)删除元素时，影响了初始的数组，即使你只是在调用方法，需要重新把该元素添加进去。当然你们可以用slice（）这个方法也行，它不影响初始数组。
下面重点来了：
function youjin(item,th,tempmyech,mdataeahars,alength){ var t=th,dtshow=false,ittep=item+1, legendshow=false;if((alength%2==0 && ittep==alength/2) || (alength%2==1 && ittep==(alength+1)/2)){dtshow=true;}if(item==0){legendshow=true;}require(['echarts','echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载'echarts/chart/line'],function (ec){ tempmyech = ec.init($(".jin")[item]); // 基于准备好的dom，初始化echarts实例 tempmyech.setTheme("macarons");var sj=[], //名称集合f_y=t.F_Y,forstr="{b0}",colors=['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'];for(var i=0;i<f_y.length;i++){sj.push(f_y[i].name);forstr+= "<br/><font color="+colors[i]+"> ● </font>{a"+i+"} : {c"+i+"}"} //匹配数据 var option = {/* title: { //图表标题text: '数据图'}, */tooltip: { trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
formatter:forstr ,axisPointer: {type: 'cross'}},grid: { //空值形成图形的大小和位置y:25,left: '3%',right: '4%',height:"64%",containLabel: true},dataZoom : { //放大缩小轴y:130,show : dtshow,realtime: true,height:15,start : 0,end : 100},toolbox: { //工具栏显示 show: true,
feature: { mark : {show : false,title : {mark : '辅助线开关',markUndo : '删除辅助线',markClear : '清空辅助线'},lineStyle : {width : 2,color : '#1e90ff',type : 'dashed'}},dataZoom : {show : legendshow, //legendshow
title : {dataZoom : '区域缩放',dataZoomReset : '区域缩放后退'}},dataView : {show : true, //legendshowtitle : '数据视图',readOnly: false,lang: ['数据视图', '关闭', '刷新']},magicType: {show : true, //legendshow
title : {line : '折线图切换',bar : '柱形图切换',stack : '堆积',tiled : '平铺',force: '力导向布局图切换',chord: '和弦图切换',pie: '饼图切换',funnel: '漏斗图切换'}, option: {// line: {},
bar: {barWidth:40, //柱宽barMinHeight:2, //最小柱高//barGap:'5%' , //柱间距离，默认30%barCategoryGap:'5%' //类目间柱形距离，默认为类目间距的20%
}// stack: {...},// tiled: {...},// force: {...},// chord: {...},// pie: {},// funnel: {...}
},type : ['line', 'bar', 'stack', 'tiled'] }, restore : {show : legendshow, //
title : '还原'}, saveAsImage: { show:legendshow ,title : '保存为图片',type : 'png',lang : ['点击保存'] //显示“另存为图片”工具*/
}}},xAxis: {type: 'category',position:'bottom',boundaryGap : true,axisTick: {onGap:false},splitLine: {show:false},data: t.F_X //填入X轴数据
},color:colors,legend: { //图表上方的类别显示
show:legendshow,data:sj,textStyle: {fontSize: 12,color: '#000'}},series: t.F_Y,yAxis : [
{//第一个（左边）Y轴，yAxisIndex为0type : 'value',name : t.F_Z,axisLabel : {formatter: '{value} ' //控制输出格式
}} ]}; tempmyech.showLoading(); //数据加载完之前先显示一段简单的loading动画tempmyech.hideLoading(); //隐藏加载动画tempmyech.setOption(option); //载入图表
mdataeahars.push(tempmyech);})}这里着重说明下：require这个的作用，是用来添加js类的；假如你不用做联动，那么你可以不用它，我最早参考的博客如：http://www.cnblogs.com/Dreamer-1/p/5530221.html
而你在做联动时必然会抛弃一部分的功能。代码最开始的require.config({path:{}})是定义总路径，而之后的require([ ] , function(ec){})，数组中传入你需要的js类库，（之前有人测试说可以传入空值），但是我测试是不行的，必须要有echarts类和你所需用的图类。而这个参数ec,就是不用require时，所用的echarts对象。所以你要是用.connect( [ ])方法做联动还是写上require（）这种方式吧。这里先介绍.connect( [ ])方式吧好，我们继续下一步：js调用的其他函数代码
//联动数组function linkage(mit ,em){mit.connect(em);}//去除元素function arydlt(item,arr){var dtemparr=arr||[];dtemparr.remove(item);return dtemparr;}
Array.prototype.remove= function(val) {for(var i=0; i<this.length; i++) {if(this[i] == val) {this.splice(i, 1);break;}}
}代码到这里基本结束，点击按钮后，我们看看效果如何：
为了方便大家深入研究，我在封装option这个对象时，加入了很多参数和一些常用的工具菜单栏选项。因为我学习使用时网上的资料杂七杂八，所以觉得有必要给大家一个快速掌握常用的功能实现，比如放大缩小滚动条的位置和高度，图之间的间距等等。还给大家做好了鼠标点击时动态显示的样式同步效果。
2.2.7版本，源码文件地址：https://files.cnblogs.com/files/mobeisanghai/link-all.rar
以上方法是版本2.27，好久没更新文档了，下面分享3.X以上版本的文件，方法更加高效，简洁。直接给源码，下载地址：https://files.cnblogs.com/files/mobeisanghai/link1.rar
本例的缺点:引入的是百度提供的echart插件，http://echarts.baidu.com/build/dist/echarts.js，有部分功能未能实现（比如那个截图功能截出的是空白页面，当然你也可以参考我的上上一篇关于js对div的截图，http://www.cnblogs.com/mobeisanghai/p/7682463.html）。
下面分享4.X版本的新内容，简单暴力，多图用一个canvas，提高绘图效率
源码地址：https://files.cnblogs.com/files/mobeisanghai/link4.0.rar
核心解释：这里用到一个坐标轴指示器（axisPointer）的全局公用设置，很全面，想深入了解的同学可以去看百度api配置文档。
axisPointer: {
link:[
{xAxisIndex: "all"}], //link 是一个数组，其中每一项表示一个 link group，一个 group 中的坐标轴互相联动
label: {
backgroundColor: '#777'
}
},
博文出处：http://www.cnblogs.com/mobeisanghai/p/7683158.html，如有转载请标明文章出处
转载于:https://www.cnblogs.com/mobeisanghai/p/7683158.html
用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果相关推荐
- 微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
- canvas动态绘制折线图
公司的实践课题vue项目,用折线图展示近六个月的收入和支出,以前看到图表,第一个想到的就是从echarts官网调用,但这次导师建议我们用canvas去画,然后去封装,这样可以加大课题难度,同时理解底层 ...
- iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略
我是前言: 大约几个月前我写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, 来稍加 ...
- 动态绘制柱状图饼状图
http://www.cnblogs.com/haian/archive/2009/12/08/1619751.html 转载于:https://www.cnblogs.com/modernsky20 ...
- Axure原型创建折线、柱状等图形，引用echarts
1.在echarts网站选择对应的统计图形: 网址:Examples - Apache ECharts 2.对代码进行编辑,使其适配自己的业务. 3.在Axure中创建一个基本元件矩形.命名为:tes ...
- matplotlib画图-折线/散点/柱状/条形图
1 折线图 [绘图]: plt.plot(x,y):x,y的位置绘制两个折线,并设置不同样式: plt.plot([位置1], 值1,'样式1', [位置2], 值2,'样式2') 或者,重复: pl ...
- VML 画统计 柱状、饼图、折线
<!-- --> <!-- 涉及文件 alt.js / function.asp--> <!-- 必须包含页面所有代码 --> <!-- 高度定义有待改进 c ...
- python横向柱状图-python绘制横向水平柱状条形图Bar
python绘制横向水平柱状条形图Bar import matplotlib import random import matplotlib.pyplot as plt # 中文乱码和坐标轴负号处理. ...
- 柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据 使用了双x轴实现重合 使用了stack实现堆积 使用了legendselectchanged和dispatchAction重写了图例点击事 ...
最新文章
- python 三分钟入门_Cython 三分钟入门教程
- JNI 实战全面解析
- 基于BootStrap 4.x 中的Flex 实现各种布局
- EMR集群安全认证和授权管理
- SAP Spartacus后台CMS Component和Angular Component的映射关系
- java获取ram_Java：ChronicleMap第2部分，超级RAM映射
- 京东健康股价创下新高 市值突破6000亿港元
- java远程执行命令报错java.io.IOException: Cannot run program “ifconfig“: error=2, No such file or directory
- Nginx网站根目录更改及导致403 forbidden的问题解决
- （转）WriteOnce and RunAnyWhere
- lwip协议栈在linux运行,一种轻量级的TCP_IP协议栈LwIP在嵌入式系统中的应用
- 【父亲节H5】用独特的方式表达最深沉的爱！
- python 特征选择卡方_文本特征选择(信息熵、Gini、IV、卡方值)
- Java——图形 继承Shapes（形状）计算周长，面积。
- ［资源］C++ 程序员必收藏
- 编写程序FooBizBaz.java,从1循环到150并且在每行打印一个值，另外在每个3的倍数行上打印出“foo”，在每个5的倍数行上打印“biz”，在每个7的倍数行上打印输出“baz”。
- android 盒子刷机,一加5刷机盒子
- C++：map.insert插入重复键（已存在键）将忽略，而非值覆盖
- 考研线性代数深入理解
- 情人节 玫瑰花表白源码