Echarts圖表控件使用總結2(Line，Bar)—問題篇

時間 2019-11-11

標籤 echarts 圖表控件使用總結 line 問題简体版

原文原文鏈接

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刷新和顯示的功能，如圖所示：html

　　b.可是今天上班發現遇到了一些問題，也是很細節的問題，那麼下面咱們就來探討一下這幾種問題的解決方法，若是你們還有什麼更好地建議的話，但願你們可以留言。前端

　　c.本人水平有限，不免寫出來可能會出現錯誤，若是你們遇到有問題的地方但願可以留言，我將和你探討而且更新錯誤內容。　　jquery

　　d.下面我將闡述我遇到的兩個需求和一個問題，那麼針對這些問題的解決方法，若是你們還遇到其它什麼需求或者問題，請留言。ajax

2.問題

　　a.Echarts開啓自動刷新的時候，若是瀏覽器長時間不關閉或者退出自動刷新程序的網頁的時候，若是時間足夠長，會發現瀏覽器會自動關閉，緣由是Echart內存沒有來得及釋放，致使內存溢出。數據庫

　　b.若是Echarts在開發的時候咱們選擇既有樹狀也有線狀(圖片右上角)，那麼當咱們單擊線狀查看的時候會發現當程序自動執行的時候就會又回到原始狀態。json

　　c.當咱們同時顯示好幾條數據的時候，單擊某個數據會不顯示，再單擊會顯示(圖片中間最上面)，那麼若是咱們只想看某一種的話這時候單擊剩下最後一種的時候發現程序自動執行刷新又回到原始狀態了。後端

　　d.頁面緩存的實現，當咱們選擇20秒刷新，若是關閉瀏覽器再次打開，又會回到原始狀態，故而咱們須要考慮解決緩存問題。瀏覽器

3.解決方法

　　a.對於內存溢出的解決方法，Echart提供了clear和Dispose方法，在循環刷新以前調用便可解決這個問題緩存

　　b.對於問題b的解決方法在上篇文章中已經實現了，思路是：註冊ecConfig.EVENT.MAGIC_TYPE_CHANGED事件，當單擊的時候讀取param.magicType.bar便可讀取到用戶單擊的是什麼類型(line,bar,....)，而後在發送請求的時候將此類型當作參數傳遞到後臺按照上篇博客的寫法便可實現。cookie

　　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位的時候補0
101                 ,
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.selected
183             },
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: dataSeriesList
201         };
202         return option;
203     };
204 
205     return {
206         init: function(options) {
207             $.extend(defaults, options || {}); //將options的值賦值給上述對象
208             initialize(); //初始化信息
209             bindEvent(); //觸發事件
210         }
211     };
212 }());