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.公用代码

  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. }());

Echarts图表控件使用总结2(Line,Bar)—问题篇的更多相关文章

  1. Echarts图表控件使用总结1(Line,Bar)

    问题篇(详解):http://www.cnblogs.com/hanyinglong/p/4708337.html 1.前言 a.在系统开发过程中可能会使用到图表控件,一个好的图标控件可以使我们的网站 ...

  2. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  3. 图表控件== 百度 echarts的入门学习

    花了3天的时间 去学习跟试用之前两款的图表控件 hightcharts(商业,人性化,新手非常方便试用,图表少了点) 跟chartjs==>搭配vue更好 控件,整体而言都还可以. http:/ ...

  4. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  5. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

  6. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  7. [深入浅出Windows 10]QuickCharts图表控件库解析

    13.4 QuickCharts图表控件库解析     QuickCharts图表控件是Amcharts公司提供的一个开源的图表控件库,这个控件库支持WPF.Silverlight.和Windows等 ...

  8. 图表控件的学习===》hightChart 和 Chartjs的使用

    hightChart : 比较旧的图表控件   商业需要授权 Chartjs 免费开源 刚开始使用了下 hightchart 然后参考示例 建了对应的参数配置的类, 也顺利的集合到后台动态传输.  后 ...

  9. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

随机推荐

  1. 国行手机安装GOOGLE PLAY

    原文地址:http://blog.sina.com.cn/s/blog_68cff87b0101a96k.html 相信国行的手机都是没有google Play 功能的吧,相比其它国外的手机,功能上逊 ...

  2. 一个基于POP3协议进行邮箱账号验证的类

    最近老陈要针对企业邮箱做一些开发,以对接企业OA神马的,但企业邮箱唯独没有开放账号密码验证功能,很恼火!不得已,翻出早些年的Asp代码改编成了C#类,实现了一个C#下的通过POP3协议进行邮箱账号验证 ...

  3. ASP.NET 网站支持多语言

    ASP.NET网站支持多语言 (本地资源文件和全局资源文件的调用及需注意的地方总结)   一.   本地资源文件(App_LocalResources): ①.     本地资源的生成及调用 1.本地 ...

  4. Android studio动态调试smali

    前面介绍了使用IDA动态调试smali,这种方法设置简单,不用重打包,用起来方便,但是如果变量类型设置错误则会马上退出调试,这是让人不爽的地方,而使用Android studio则不会.   0x01 ...

  5. js中的执行上下文,菜鸟入门基础。

    console.log(a); //Uncaught ReferenceError: a is not defined 因为没有定义a所以报错了. var a = 52; console.log(a) ...

  6. EditorWindow简单双击效果

    Editor模式下的控件没有提供直接检测双击的消息,但可以简单模拟出双击检测的效果,代码如下所示: private double clickTime = 0f; ... if (GUILayout.B ...

  7. codeforces D. Design Tutorial: Inverse the Problem

    题意:给定一个矩阵,表示每两个节点之间的权值距离,问是否可以对应生成一棵树, 使得这棵树中的任意两点之间的距离和矩阵中的对应两点的距离相等! 思路:我们将给定的矩阵看成是一个图,a 到 b会有多条路径 ...

  8. AngularJS 监控对象属性:$watch和$digest

    监控对象属性:$watch和$digest $watch和$digest是相辅相成的.两者一起,构成了Angular作用域的核心:数据变化的响应.如果你学习过WPF,并基于WPF使用过一些MVVM框架 ...

  9. XPATH使用总结

    最近公司里需要写一些爬虫项目,所以去接触学习了xpath的内容.在w3c上给出了xpath的语法,但是我感觉不全,而且讲得也不详细,我又去网上找了一些文章,总结一下. 这几个都是比较常用的,能解决基本 ...

  10. EF封装类,供参考!

    以下是我对EF DB FIRST 生成的ObjectContext类进行封装,代码如下,供参考学习: using System; using System.Collections.Generic; u ...