Echarts图表控件使用总结2(Line，Bar)—问题篇

Echarts图表控件使用总结1(Line，Bar)：http://www.cnblogs.com/hanyinglong/p/Echarts.html

1.前言

　　a.前两天简单写了一篇在MVC中如何使用Echarts的文章，文章地址：http://www.cnblogs.com/hanyinglong/p/Echarts.html，里面实现了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.公用代码

 var bmscommon = function () { };
 bmscommon = {
     //处理Ajax请求
     ajax: function(options) {
         var defaults = {
             async: false,
             cache: true,
             type: "POST",
             contentType: "application/json"
         };
         defaults = $.extend(defaults, options);
         //ajax请求
         jQuery.ajax({
             url: defaults.url,
             type: defaults.type,
             cache: defaults.cache,
             async: defaults.async,
             contentType: defaults.contentType,
             data: defaults.data,
             dataType: "json",
             onwait: "正在加载数据，请稍后...",
             success: function(result) {
                 if (defaults.fn) {
                     defaults.fn.call(result);
                 }
                 return result;
             }
         });
     },
     /* cookie处理
      * common.cookie('name','value',{expires:7,path:'/',domain:'jquery.com',secure:true})
      */
     cookie: function(name, value, options) {
         if (typeof value != "undefined") {
             options = options || {};
             if (value === null) {
                 value = "";
                 options.expires = -1; //失效
             }
             var expires = "";
             if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {
                 var date;
                 if (typeof options.expires == 'number') {
                     date = new Date();
                     date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
                 } else {
                     date = options.expires;
                 }
                 expires = ";expires=" + date.toUTCString();
             }
             var path = options.path ? ";path=" + options.path : "";
             var domain = options.domain ? ";domain=" + options.domain : "";
             var secure = options.secure ? ";secure" : "";
             document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join('');
         } else {
             var cookieValue = null;
             if (document.cookie && document.cookie != "") {
                 var cookies = document.cookie.split(';');
                 for (var i = 0; i < cookies.length; i++) {
                     var cookie = jQuery.trim(cookies[i]);
                     if (cookie.substring(0, name.length + 1) == (name + "=")) {
                         cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                         break;
                     }
                 }
             }
             return cookieValue;
         }
         return this;
     },
     //处理日期
     date: function(obj, format, defval) {
         var data;
         if (/\/Date\((\d+)\)\//gi.test(obj)) {
             data = eval(obj.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
         } else {
             data = new Date(obj);
             if (defval != null && data.toDateString() == (new Date(null)).toDateString()) {
                 return defval;
             }
         }

         function formatDate(date, mat) {
             var paddNum = function(num) {
                 num += "";
                 return num.replace(/^(\d)$/, "0$1");
             };
             //指定格式字符
             var cfg = {
                 yyyy: date.getFullYear() //年 : 4位
                 ,
                 yy: date.getFullYear().toString().substring(2) //年 : 2位
                 ,
                 M: date.getMonth() + 1 //月 : 如果1位的时候不补0
                 ,
                 MM: paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0
                 ,
                 d: date.getDate() //日 : 如果1位的时候不补0
                 ,
                 dd: paddNum(date.getDate()) //日 : 如果1位的时候补0
                 ,
                 hh: paddNum(date.getHours()) //时
                 ,
                 mm: paddNum(date.getMinutes()) //分
                 ,
                 ss: paddNum(date.getSeconds()) //秒
             };
             mat || (mat = "yyyy-MM-dd");
             return mat.replace(/([a-z])(\1)*/ig, function(m) { return cfg[m]; });
         }

         return formatDate(data, format);
     }
 };

　　b.操作Echart插件

 /* 功能:实现读取数据库中的需要监控的数据在前端展示，JS操作Echarts插件
  * 创建人：Kencery  创建时间：2015-7-30
  * 修改人：Kencery  修改时间：2015-8-6
  * 修改人：Kencery  修改时间：2015-8-13
  */

 var etaoshi = window.etaoshi || {};
 etaoshi.bms = etaoshi.bms || {};

 etaoshi.bms.orderInfo = (function() {
     var defaults = {
         url: "/OrderInfo/ReadDataRefreshChats",
         main: "main",
         dropDownId: "dropDownId",
         btnStopRefresh: "btnStopRefresh",
         btnHandRefresh: "btnHandRefresh",
     };
     var map = {}; //存储临时变量

     var initialize = function() {
         //第一步：读取选择的刷新时间。
         var seconds = bmscommon.cookie("refreshSeconds");
         if (seconds) {
             $("#" + defaults.dropDownId + " option[value=" + seconds + "]").attr("selected", "selected");
         }

         initializeEchats(); //第二步：调用方法首次刷新结果
         setInterValEchart(); //第三步骤：定时执行程序
     };
     var bindEvent = function() {
         $("#" + defaults.dropDownId).on("change", function() { refreshSecondChange(); });
         $("#" + defaults.btnStopRefresh).on("click", function() { stopRefresh(); });
         $("#" + defaults.btnHandRefresh).on("click", function() { handRefresh(); });
     };

     var initializeEchats = function() {
         bmscommon.ajax({
             type: "get",
             url: defaults.url,
             cache: true,
             data: {},
             fn: function() {
                 var defaultMain = document.getElementById(defaults.main);
                 var $Id = $(defaultMain).attr("id"); //用来给缓存作为标示
                 var option = getJsonOptions(this, $Id); //处理构造参数
                 initFillData(option, defaultMain, $Id);
             }
         });
     };
     var initFillData = function (option, main, $Id) {
         var tempclear = map[$Id + "_id"];
         if (tempclear) {
             tempclear.clear();
             tempclear.dispose();
             delete tempclear;
             map[$Id + "_id"] = null;
         }
         var myChart = echarts.init(main); //初始化Echarts图标信息
         if (!tempclear) {
             map[$Id + "_id"] = myChart;
         }
         // 为echarts对象加载数据
         myChart.setOption(option, true);
         //添加事件
         myChart.on(echarts.config.EVENT.MAGIC_TYPE_CHANGED, function(param) {
             //将信息存放在Cookie缓存中
             if (param.magicType.bar) {
                 bmscommon.cookie($Id + "_selected_magic", "bar", {
                     expires: 365,
                     path: '/'
                 });
             } else {
                 bmscommon.cookie($Id + "_selected_magic", "line", {
                     expires: 365,
                     path: '/'
                 });
             }
         });
         myChart.on(echarts.config.EVENT.LEGEND_SELECTED, function(param) {
             var tempcookielegend = {}, selected = param.selected;
             $.each(selected, function(i, n) {
                 if (!n) {
                     tempcookielegend[i] = false;
                 }
             });
             bmscommon.cookie($Id + "_selected_legend", JSON.stringify(tempcookielegend), {
                 expires: 365,
                 path: '/'
             });
         });
     };
     var setInterValEchart = function() {
         map["setInterVal"] = window.setInterval(function () {
             initializeEchats();
         }, parseInt($("#" + defaults.dropDownId).find("option:selected").text() * 1000));
     };

     var refreshSecondChange = function() {
         bmscommon.cookie("refreshSeconds", $("#" + defaults.dropDownId).val(), {
             expires: 365,
             path: '/'
         });
         clearInterval(map["setInterVal"]);
         initializeEchats();  //先执行一遍
         setInterValEchart();  //在调用定时执行
     };
     var stopRefresh = function() {
         clearInterval(map["setInterVal"]);
     };
     var handRefresh = function() {
         initializeEchats();
     };

     var getJsonOptions = function(datas, $Id) {
         var dataSeriesList = datas.SeriesList;
         //最大值，最小值，平均值添加
         $.each(dataSeriesList, function(j, n) { //前端处理JS添加最大值和最小值以及平均值。
             if (n) {
                 //添加最大值和最小值
                 var market = {};
                 var data1 = [];
                 var max = {}, min = {};
                 min.type = 'min';
                 min.name = '最小值';
                 data1.push(min);
                 max.type = 'max';
                 max.name = '最大值';
                 data1.push(max);
                 market.data = data1;
                 n.markPoint = market;
                 //平均值
                 var markLine = {};
                 var dataAvg = [];
                 var avg = {};
                 avg.type = 'average';
                 avg.name = '平均值';
                 dataAvg.push(avg);
                 markLine.data = dataAvg;
                 n.markLine = markLine;
             }
         });
         //line,bar判断
         try {
             var type = bmscommon.cookie($Id + "_selected_magic") == null ? "bar" : bmscommon.cookie($Id + "_selected_magic");
             $.each(dataSeriesList, function(i, n) {
                 if (n) {
                     n.type = type;
                 }
             });
         } catch(e) {
         }

         //处理单击显示各种不同图形的控制
         try {
             datas.selected = JSON.parse(bmscommon.cookie($Id + "_selected_legend"));
             if (!datas.selected) {
                 datas.selected = {};
             }
         } catch(e) {
         }

         var option = {
             title: {
                 text: '订单号剩余量监控',
             },
             tooltip: {
                 show: true,
                 trigger: 'axis'
             },
             toolbox: {
                 show: true,
                 feature: {
                     mark: { show: true },
                     dataView: { show: true, readOnly: false },
                     magicType: { show: true, type: ['line', 'bar'] },
                     restore: { show: true },
                     saveAsImage: { show: true }
                 }
             },
             legend: {
                 data: datas.Legend,
                 selected: datas.selected
             },
             calculable: true,
             xAxis: [
                 {
                     name: datas.XName,
                     type: 'category',
                     data: datas.XAxis  //所有日期读取
                 }
             ],
             yAxis: [{
                 name: '剩余量',
                 type: 'value',
                 scale: true,
                 precision: 2,
                 splitNumber: 12,
                 splitArea: { show: true }
             }],
             series: dataSeriesList
         };
         return option;
     };

     return {
         init: function(options) {
             $.extend(defaults, options || {}); //将options的值赋值给上述对象
             initialize(); //初始化信息
             bindEvent(); //触发事件
         }
     };
 }());