用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]+">&nbsp;●&nbsp;</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,   //legendshow
                                title : '数据视图',
                                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为0
                                     type : '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这个对象时,加入了很多参数和一些常用的工具菜单栏选项。因为我学习使用时网上的资料杂七杂八,所以觉得有必要给大家一个快速掌握常用的功能实现,比如放大缩小滚动条的位置和高度,图之间的间距等等。还给大家做好了鼠标点击时动态显示的样式同步效果。

本例的缺点:引入的是百度提供的echart插件,http://echarts.baidu.com/build/dist/echarts.js,有部分功能未能实现(比如那个截图功能截出的是空白页面,当然你也可以参考我的上上一篇关于js对div的截图,http://www.cnblogs.com/mobeisanghai/p/7682463.html)。

 博文出处:http://www.cnblogs.com/mobeisanghai/p/7683158.html,如有转载请标明文章出处

v cled @ } Arrtaeahars-d="ap>2017-6-5"7 18:09>(ht'p://www.cnblogs.c 阅读( } Arrtaeahars_ta c; ( (编辑gs.c 㵅谈"#" on ="AddToWz(://www.);span>< nable_">收藏ef="httotfhttotfh/jquery-2.2.0.min.js"> an>,"t- 0 s-placehol--> d: navi/jquery-2.2.0.min.js"> C0 Manr();s0 Manr00"义 a' 0  'itPo ' 0  'ascript"> a'> C0 Show' ' mdatae' 0 nav'> } Arrtae'} Ar_resh_tips'trong>.c㵅谈'js"> kins/c顶om/ef="httotfs> a' 0  _000000"er'处

a'ad_.2'"httotfs> a'_义<_lass' ' mdatae' 代码= bsp, C Pss=IineB> -页s d: navi/jquery-2.2.0.min.js"> k">play:none d: navi/jquery-2.2.0.min.js"> gTitle 博联动效果