Echarts图表控件使用总结1(Line，Bar)：

1.前言

　　a.前两天简单写了一篇在MVC中如何使用Echarts的文章，文章地址：，里面实现了Echart刷新和显示的功能，如图所示：

　　　　

　　b.但是今天上班发现遇到了一些问题，也是很细节的问题，那么下面我们就来探讨一下这几种问题的解决方法，如果大家还有什么更好地建议的话，希望大家能够留言。

　　c.本人水平有限，难免写出来可能会出现错误，如果大家遇到有问题的地方希望能够留言，我将和你探讨并且更新错误内容。　　

　　d.下面我将阐述我遇到的两个需求和一个问题，那么针对这些问题的解决方法，如果大家还遇到其它什么需求或者问题，请留言。

2.问题

　　a.Echarts开启自动刷新的时候，如果浏览器长时间不关闭或者退出自动刷新程序的网页的时候，如果时间足够长，会发现浏览器会自动关闭，原因是Echart内存没有来得及释放，导致内存溢出。

　　b.如果Echarts在开发的时候我们选择既有树状也有线状(图片右上角)，那么当我们单击线状查看的时候会发现当程序自动执行的时候就会又回到原始状态。

　　c.当我们同时显示好几条数据的时候，单击某个数据会不显示，再单击会显示(图片中间最上面)，那么如果我们只想看某一种的话这时候单击剩下最后一种的时候发现程序自动执行刷新又回到原始状态了。

　　d.页面缓存的实现，当我们选择20秒刷新，如果关闭浏览器再次打开，又会回到原始状态，故而我们需要考虑解决缓存问题。

3.解决方法

　　a.对于内存溢出的解决方法，Echart提供了clear和Dispose方法，在循环刷新之前调用即可解决这个问题

　　b.对于问题b的解决方法在上篇文章中已经实现了，思路是：注册ecConfig.EVENT.MAGIC_TYPE_CHANGED事件，当单击的时候读取param.magicType.bar即可读取到用户单击的是什么类型(line,bar,....)，然后在发送请求的时候将此类型当做参数传递到后台按照上篇博客的写法即可实现。

　　c.对于问题c的解决方法思路如下：

　　　　(1) 注册：ecConfig.EVENT.LEGEND_SELECTED，当单击的时候读取读取到单击的信息之后，存放在缓存中，在下次打开的时候进行处理。

　　d.修改比较严重，后端都有修改，如果大家需要使用，请仔细检查。下面附前端JS代码。

　　e.上面是本篇博客所有遇到的问题，简要说明一下，JS代码如下，其它代码请参考上篇博客的代码，没有做任何改动。

3.实现代码

　　a.公用代码

1 var bmscommon = function () { };  2 bmscommon = {  3     //处理Ajax请求  4     ajax: function(options) {  5         var defaults = {  6             async: false,  7             cache: true,  8             type: "POST",  9             contentType: "application/json" 10         }; 11         defaults = $.extend(defaults, options); 12         //ajax请求 13         jQuery.ajax({ 14             url: defaults.url, 15             type: defaults.type, 16             cache: defaults.cache, 17             async: defaults.async, 18             contentType: defaults.contentType, 19             data: defaults.data, 20             dataType: "json", 21             onwait: "正在加载数据，请稍后...", 22             success: function(result) { 23                 if (defaults.fn) { 24                     defaults.fn.call(result); 25                 } 26                 return result; 27             } 28         }); 29     }, 30     /* cookie处理 31      * common.cookie('name','value',{expires:7,path:'/',domain:'jquery.com',secure:true}) 32      */ 33     cookie: function(name, value, options) { 34         if (typeof value != "undefined") { 35             options = options || {}; 36             if (value === null) { 37                 value = ""; 38                 options.expires = -1; //失效 39             } 40             var expires = ""; 41             if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) { 42                 var date; 43                 if (typeof options.expires == 'number') { 44                     date = new Date(); 45                     date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 46                 } else { 47                     date = options.expires; 48                 } 49                 expires = ";expires=" + date.toUTCString(); 50             } 51             var path = options.path ? ";path=" + options.path : ""; 52             var domain = options.domain ? ";domain=" + options.domain : ""; 53             var secure = options.secure ? ";secure" : ""; 54             document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join(''); 55         } else { 56             var cookieValue = null; 57             if (document.cookie && document.cookie != "") { 58                 var cookies = document.cookie.split(';'); 59                 for (var i = 0; i < cookies.length; i++) { 60                     var cookie = jQuery.trim(cookies[i]); 61                     if (cookie.substring(0, name.length + 1) == (name + "=")) { 62                         cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 63                         break; 64                     } 65                 } 66             } 67             return cookieValue; 68         } 69         return this; 70     }, 71     //处理日期 72     date: function(obj, format, defval) { 73         var data; 74         if (/\/Date\((\d+)\)\//gi.test(obj)) { 75             data = eval(obj.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")); 76         } else { 77             data = new Date(obj); 78             if (defval != null && data.toDateString() == (new Date(null)).toDateString()) { 79                 return defval; 80             } 81         } 82  83         function formatDate(date, mat) { 84             var paddNum = function(num) { 85                 num += ""; 86                 return num.replace(/^(\d)$/, "0$1"); 87             }; 88             //指定格式字符 89             var cfg = { 90                 yyyy: date.getFullYear() //年 : 4位 91                 , 92                 yy: date.getFullYear().toString().substring(2) //年 : 2位 93                 , 94                 M: date.getMonth() + 1 //月 : 如果1位的时候不补0 95                 , 96                 MM: paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0 97                 , 98                 d: date.getDate() //日 : 如果1位的时候不补0 99                 ,100                 dd: paddNum(date.getDate()) //日 : 如果1位的时候补0101                 ,102                 hh: paddNum(date.getHours()) //时103                 ,104                 mm: paddNum(date.getMinutes()) //分105                 ,106                 ss: paddNum(date.getSeconds()) //秒107             };108             mat || (mat = "yyyy-MM-dd");109             return mat.replace(/([a-z])(\1)*/ig, function(m) { return cfg[m]; });110         }111 112         return formatDate(data, format);113     }114 };

　　b.操作Echart插件

1 /* 功能:实现读取数据库中的需要监控的数据在前端展示，JS操作Echarts插件  2  * 创建人：Kencery  创建时间：2015-7-30   3  * 修改人：Kencery  修改时间：2015-8-6     4  * 修改人：Kencery  修改时间：2015-8-13   5  */  6   7 var etaoshi = window.etaoshi || {};  8 etaoshi.bms = etaoshi.bms || {};  9  10 etaoshi.bms.orderInfo = (function() { 11     var defaults = { 12         url: "/OrderInfo/ReadDataRefreshChats", 13         main: "main", 14         dropDownId: "dropDownId", 15         btnStopRefresh: "btnStopRefresh", 16         btnHandRefresh: "btnHandRefresh", 17     }; 18     var map = {}; //存储临时变量 19  20     var initialize = function() { 21         //第一步：读取选择的刷新时间。 22         var seconds = bmscommon.cookie("refreshSeconds"); 23         if (seconds) { 24             $("#" + defaults.dropDownId + " option[value=" + seconds + "]").attr("selected", "selected"); 25         } 26  27         initializeEchats(); //第二步：调用方法首次刷新结果 28         setInterValEchart(); //第三步骤：定时执行程序 29     }; 30     var bindEvent = function() { 31         $("#" + defaults.dropDownId).on("change", function() { refreshSecondChange(); }); 32         $("#" + defaults.btnStopRefresh).on("click", function() { stopRefresh(); }); 33         $("#" + defaults.btnHandRefresh).on("click", function() { handRefresh(); }); 34     }; 35  36     var initializeEchats = function() { 37         bmscommon.ajax({ 38             type: "get", 39             url: defaults.url, 40             cache: true, 41             data: {}, 42             fn: function() { 43                 var defaultMain = document.getElementById(defaults.main); 44                 var $Id = $(defaultMain).attr("id"); //用来给缓存作为标示 45                 var option = getJsonOptions(this, $Id); //处理构造参数 46                 initFillData(option, defaultMain, $Id); 47             } 48         }); 49     }; 50     var initFillData = function (option, main, $Id) { 51         var tempclear = map[$Id + "_id"]; 52         if (tempclear) { 53             tempclear.clear(); 54             tempclear.dispose(); 55             delete tempclear; 56             map[$Id + "_id"] = null; 57         } 58         var myChart = echarts.init(main); //初始化Echarts图标信息 59         if (!tempclear) { 60             map[$Id + "_id"] = myChart; 61         } 62         // 为echarts对象加载数据 63         myChart.setOption(option, true); 64         //添加事件 65         myChart.on(echarts.config.EVENT.MAGIC_TYPE_CHANGED, function(param) { 66             //将信息存放在Cookie缓存中 67             if (param.magicType.bar) { 68                 bmscommon.cookie($Id + "_selected_magic", "bar", { 69                     expires: 365, 70                     path: '/' 71                 }); 72             } else { 73                 bmscommon.cookie($Id + "_selected_magic", "line", { 74                     expires: 365, 75                     path: '/' 76                 }); 77             } 78         }); 79         myChart.on(echarts.config.EVENT.LEGEND_SELECTED, function(param) { 80             var tempcookielegend = {}, selected = param.selected; 81             $.each(selected, function(i, n) { 82                 if (!n) { 83                     tempcookielegend[i] = false; 84                 } 85             }); 86             bmscommon.cookie($Id + "_selected_legend", JSON.stringify(tempcookielegend), { 87                 expires: 365, 88                 path: '/' 89             }); 90         }); 91     }; 92     var setInterValEchart = function() { 93         map["setInterVal"] = window.setInterval(function () { 94             initializeEchats(); 95         }, parseInt($("#" + defaults.dropDownId).find("option:selected").text() * 1000)); 96     }; 97  98     var refreshSecondChange = function() { 99         bmscommon.cookie("refreshSeconds", $("#" + defaults.dropDownId).val(), {100             expires: 365,101             path: '/'102         });103         clearInterval(map["setInterVal"]);104         initializeEchats();  //先执行一遍105         setInterValEchart();  //在调用定时执行106     };107     var stopRefresh = function() {108         clearInterval(map["setInterVal"]);109     };110     var handRefresh = function() {111         initializeEchats();112     };113 114     var getJsonOptions = function(datas, $Id) {115         var dataSeriesList = datas.SeriesList;116         //最大值，最小值，平均值添加117         $.each(dataSeriesList, function(j, n) { //前端处理JS添加最大值和最小值以及平均值。118             if (n) {119                 //添加最大值和最小值120                 var market = {};121                 var data1 = [];122                 var max = {}, min = {};123                 min.type = 'min';124                 min.name = '最小值';125                 data1.push(min);126                 max.type = 'max';127                 max.name = '最大值';128                 data1.push(max);129                 market.data = data1;130                 n.markPoint = market;131                 //平均值132                 var markLine = {};133                 var dataAvg = [];134                 var avg = {};135                 avg.type = 'average';136                 avg.name = '平均值';137                 dataAvg.push(avg);138                 markLine.data = dataAvg;139                 n.markLine = markLine;140             }141         });142         //line,bar判断143         try {144             var type = bmscommon.cookie($Id + "_selected_magic") == null ? "bar" : bmscommon.cookie($Id + "_selected_magic");145             $.each(dataSeriesList, function(i, n) {146                 if (n) {147                     n.type = type;148                 }149             });150         } catch(e) {151         }152 153         //处理单击显示各种不同图形的控制154         try {155             datas.selected = JSON.parse(bmscommon.cookie($Id + "_selected_legend"));156             if (!datas.selected) {157                 datas.selected = {};158             }159         } catch(e) {160         }161 162         var option = {163             title: {164                 text: '订单号剩余量监控',165             },166             tooltip: {167                 show: true,168                 trigger: 'axis'169             },170             toolbox: {171                 show: true,172                 feature: {173                     mark: { show: true },174                     dataView: { show: true, readOnly: false },175                     magicType: { show: true, type: ['line', 'bar'] },176                     restore: { show: true },177                     saveAsImage: { show: true }178                 }179             },180             legend: {181                 data: datas.Legend,182                 selected: datas.selected183             },184             calculable: true,185             xAxis: [186                 {187                     name: datas.XName,188                     type: 'category',189                     data: datas.XAxis  //所有日期读取190                 }191             ],192             yAxis: [{193                 name: '剩余量',194                 type: 'value',195                 scale: true,196                 precision: 2,197                 splitNumber: 12,198                 splitArea: { show: true }199             }],200             series: dataSeriesList201         };202         return option;203     };204 205     return {206         init: function(options) {207             $.extend(defaults, options || {}); //将options的值赋值给上述对象208             initialize(); //初始化信息209             bindEvent(); //触发事件210         }211     };212 }());