类似百度统计,有的时候legend的个数比较多,但是前端需要控制初始化显示的个数,以及最多显示的条数,先看效果图:

先给代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.min.js"></script>
  11. </head>
  12.  
  13. <body>
  14. <div id="all_line" style="width:100%;height:500px;margin-top: 100px;"></div>
  15.  
  16. <script>
  17. var obj = {};
  18. var text_data = ['http://www.baidu.com', 'https://www.sogou.com', 'http://www.333.com',
  19. 'http://www.444.com', 'http://www.555.com', 'http://www.666.com', 'http://www.777.com',
  20. 'http://www.888.com', 'http://www.999.com', '外部链接总计'
  21. ];
  22. for (var i = 0; i < text_data.length; i++) {
  23. if (i > 2 && (i < text_data.length - 1)) {
  24. obj[text_data[i]] = false;
  25. } else {
  26. obj[text_data[i]] = true;
  27. }
  28. }
  29. obj[text_data[text_data.length - 1]] = true;
  30. // console.log(obj)
  31. var myChart = echarts.init(document.getElementById('all_line'));
  32. myChart ? myChart.clear() : "";
  33. myChart.setOption({
  34. tooltip: {
  35. trigger: 'axis',
  36. backgroundColor: 'rgba(255,255,255,0.8)',
  37. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  38. type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
  39. shadowStyle: {
  40. color: 'rgba(150,150,150,0.2)'
  41. }
  42. },
  43. textStyle: {
  44. color: '#666',
  45. fontSize: '14px',
  46. },
  47. extraCssText: 'width:220px;height:200px;padding:0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"',
  48. formatter: function (params) {
  49. var htmlStr = "";
  50. for (var i = 0; i < params.length; i++) {
  51. var tem = params[i].name;
  52. var val = params[i].value;
  53. if (tem.indexOf('/') < 0) {
  54. tem > 9 ? tem = tem + ":00 - " + tem + ":59" : tem = "0" + tem + ":00 - " +
  55. "0" + tem + ":59";
  56. }
  57. val > 0 ? val = val : val = '--'
  58. htmlStr +=
  59. '<div style="height:26px;line-height:26px;overflow:hidden;padding:6px 8px;">' +
  60. '<span style="float:left;max-width:160px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
  61. '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
  62. params[i].color + ';"></span>' + params[i].seriesName + '</span>' +
  63. '<span style="float:right">' + val + '</span>' + '</div>'
  64. }
  65. var res =
  66. '<div><div style="height:40px;line-height:40px;padding:0 8px;background:rgba(237,233,233,0.4)">' +
  67. tem + '<span style="float:right;">' + $('.table-echarts ul.group li.cur').text() +
  68. '</span>' + htmlStr + '</div></div>'
  69. return res;
  70. },
  71. },
  72. textStyle: {
  73. color: 'rgb(120, 122, 125)',
  74. },
  75. color: ['#4fa8f9', '#6ec71e', '#f56e6a', '#fc8b40', '#818af8', '#31c9d7', '#f35e7a', '#ab7aee',
  76. '#14d68b', '#cde5ff'
  77. ],
  78. grid: {
  79. top: 30, //越大越靠下,默认60
  80. bottom: 70
  81. },
  82. legend: {
  83. bottom: 1,
  84. itemGap: 15,
  85. itemWidth: 9,
  86. itemHeight: 10,
  87. textStyle: {
  88. padding: [0, 0, 0, 8],
  89. },
  90. formatter: function (name) {
  91. return (name.length > 14 ? (name.slice(0, 14) + "...") : name);
  92. },
  93. selected: obj,
  94. data: text_data
  95. },
  96. xAxis: [{
  97. type: 'category',
  98. // boundaryGap: false,//坐标轴两边留白策略
  99. axisTick: {
  100. alignWithLabel: true
  101. },
  102. axisLabel: {
  103. interval: 2
  104. },
  105. axisLine: {
  106. lineStyle: {
  107. color: "#ddd"
  108. }
  109. },
  110. data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14',
  111. '15', '16', '17', '18', '19', '20', '21', '22', '23'
  112. ],
  113. }],
  114. yAxis: [{
  115. type: 'value',
  116. axisLine: {
  117. lineStyle: {
  118. color: "transparent"
  119. }
  120. },
  121. splitLine: {
  122. lineStyle: {
  123. color: '#eee',
  124. }
  125. }
  126. }],
  127. series: [{
  128. name: 'http://www.baidu.com',
  129. type: 'line',
  130. symbol: 'circle',
  131. symbolSize: '5',
  132. data: [8, 1, 1, 0, 0, 3, 2, 0, 6, 3, 1, 4, 7, 3, 7, 15, 11, 3, 8, 3, 2, 5, 4, 7]
  133. },
  134. {
  135. name: 'https://www.sogou.com',
  136. type: 'line',
  137. symbol: 'circle',
  138. symbolSize: '5',
  139. data: [1, 1, 0, 0, 2, 1, 0, 1, 3, 1, 0, 0, 1, 0, 1, 1, 1, 0, 2, 2, 0, 4, 2, 4]
  140. },
  141. {
  142. name: 'http://www.333.com',
  143. type: 'line',
  144. symbol: 'circle',
  145. symbolSize: '5',
  146. data: [1, 3, 0, 0, 0, 1, 1, 0, 0, 1, 2, 1, 3, 1, 1, 1, 1, 0, 2, 0, 2, 1, 1, 1]
  147. },
  148. {
  149. name: 'http://www.444.com',
  150. type: 'line',
  151. symbol: 'circle',
  152. symbolSize: '5',
  153. data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 2, 3, 0, 0, 0, 3, 1, 0, 2, 0, 1, 0, 0]
  154. },
  155. {
  156. name: 'http://www.555.com',
  157. type: 'line',
  158. symbol: 'circle',
  159. symbolSize: '5',
  160. data: [0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 2, 0, 1, 1, 2, 0]
  161. },
  162. {
  163. name: 'http://www.666.com',
  164. type: 'line',
  165. symbol: 'circle',
  166. symbolSize: '5',
  167. data: [0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 1, 0, 0]
  168. },
  169. {
  170. name: 'http://www.777.com',
  171. type: 'line',
  172. symbol: 'circle',
  173. symbolSize: '5',
  174. data: [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1]
  175. },
  176. {
  177. name: 'http://www.888.com',
  178. type: 'line',
  179. symbol: 'circle',
  180. symbolSize: '5',
  181. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0]
  182. },
  183. {
  184. name: 'http://www.999.com',
  185. type: 'line',
  186. symbol: 'circle',
  187. symbolSize: '5',
  188. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]
  189. },
  190. {
  191. name: '外部链接总计',
  192. type: 'bar',
  193. barWidth: '60%',
  194. data: [14, 6, 1, 0, 2, 5, 4, 1, 11, 8, 6, 7, 15, 5, 11, 21, 21, 6, 17, 7, 7, 14, 9, 14]
  195. }
  196. ]
  197. })
  198. //echarts点击事件
  199. myChart.on('legendselectchanged', function (params) {
  200. var legend_option = this.getOption();
  201. //手动改变legend的selected状态:
  202. // legend_option.legend[0].selected[name] = false;
  203. //切换tooltips的高度
  204. var selectTotal = 0;
  205. var tem = Object.values(params.selected);
  206. for (var j = 0; j < tem.length; j++) {
  207. if (tem[j] === true) {
  208. selectTotal += 1;
  209. }
  210. }
  211. // console.log(selectTotal)
  212. legend_option.tooltip[0].extraCssText ="width:220px;padding:0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);height:" + (40 + selectTotal *40) + "px";
  213. this.setOption(legend_option)
  214. });
  215. window.onresize = function () {
  216. myChart ? myChart.resize() : "";
  217. };
  218. </script>
  219. </body>
  220.  
  221. </html>

直接copy就能看到效果。上面是限制了初始化显示legend的前三个和最后一个。因为之前的版本出了点问题删了部分代码,如果要改变legend的select状态,请自行在代码中的echarts点击事件中根据我提供的方法进行修改,如若不明白可以打印点击事件的params查看。

Tips:

  1. 以上的数据都是虚拟的,只是为了方便查看效果。
  2. 为了不影响变量的作用域,建议把js放在jquery的ready函数里面。
  3. 如果是vue项目,可自行调整以上代码或留言获取。

我再多说几句:

在用数据刷新echarts图表时,最好先用clear()函数去清空(echarts自带的api),还有就是其实echarts完全可以由数据渲染,比如说上面的例子,它的颜色可以事先定义一个数组,把可能用到的颜色放入这个数组,然后通过你legend的个数从数组去length相同的值组成新数组,然后以变量的形式去配置。上面例子用自定义的formatter去修改了tooltip的颜色以及legend的样式。

echarts legend 限制规定显示个数,显示省略号,修改默认样式的更多相关文章

  1. Silverlight中DataGrid的显示指定列、修改默认列名和格式化日期数据和小数数据

    一:DataGrid的显示指定列.修改默认列名 使用自动生成列,就会无区别的按缺省格式展示所有项目.除了bit类型,其他类型项目会以字符串形式展现. 通过设置Columns属性,可以选择性的显示列,以 ...

  2. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  3. css:在容器内文字超过容器范围,显示一行加省略号或者两行加省略号

    一.显示一行加省略号:各浏览器兼容 .box{ width: 100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } ...

  4. WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip

    原文:WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip [TextBlock] 换行    TextWrapping="W ...

  5. CSS一行显示,显示不下的用省略号显示

    CSS一行显示,显示不下的用省略号显示 .abc{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 复制上面代码即可 ...

  6. 如何修改ECShop发货单查询显示个数

    使用ecshop的朋友都知道,商城首页调用的发货单查询,默认显示的10个.很多朋友想修改它的数量,可是在后台管理却找不到相应的地方,这个修改和显示排行榜的数量修改方法不一样.排行榜是可以在后台修改的, ...

  7. Echarts的提示(Tooltip)显示额外内容

    官方一般都是: 而我们通常是需要显示额外内容的,比如这样 其中Tooltip也是参考了网友的写法 option = { tooltip: { trigger: 'axis', formatter: f ...

  8. echarts legend 图例文字闪烁显示

    最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...

  9. TOAD和PLSQL 默认日期显示、rowid显示、TNSNAME的修改

    先说下要解决的问题: select rowid,acct_id,state_date from acct; 修改后,1)sql指明rowid,可以显示出来 2)时间格式显示为YYYYMMDD HH24 ...

随机推荐

  1. break使用不当引发的一个“血案”

    最近在网上冲浪,读到一则新闻,摘抄下这则新闻: ======================= 以下文字摘抄自互联网==================== 1990年1月15日,AT&T电话 ...

  2. 小心使用strcpy函数时越界

    strcpy()函数应该是我们用的比较常用的一个函数,基本功能是将一个字符串拷贝到我指定的内存空间.但是要复制的字符串长度超过这段内存空间的话,结果可能是未知的. 比如以下的程序: #include ...

  3. CMinpack使用介绍

    github: https://github.com/devernay/cminpack 主页: http://devernay.github.io/cminpack/ 使用手册: http://de ...

  4. 构建工具--glup如何压缩,丑化代码

    目录 为什么使用 实现 为什么使用 最近在迭代公司的项目,发现项目有如下缺点: 代码没有压缩,js文件,内存大,放在服务器上占空间: 源代码没有混淆或者丑化处理,本公司的程序员写出来的代码和高质量逻辑 ...

  5. [原创]自动化部署K8S(v1.10.11)集群

          标准运维实现自动化部署K8S集群主要分两步,第一步是部署gse-agent,拱第二步执行部署. 第一步:部署gse-agent.如下: 第二步:部署k8s集群.主要通过作业平台分为5小步执 ...

  6. [原创]mininet安装

    mininet安装: on Ubuntu 13.04: sudo apt-get install minineton Ubuntu 12.10: sudo apt-get install minine ...

  7. 【HDU - 1560】DNA sequence (dfs+回溯)

    DNA sequence 直接中文了 题目描述 21世纪是生物科技飞速发展的时代.我们都知道基因是由DNA组成的,而DNA的基本组成单位是A,C,G,T.在现代生物分子计算中,如何找到DNA之间的最长 ...

  8. html+css test1

    模拟实验楼提供的一个网页.. [可由 git clone https://github.com/shiyanlou/finaltest 获取相关图片素材] <!DOCTYPE html>& ...

  9. 分组在re模块中的使用以及使用正则表达式的技巧

    1.split:切割 使用split不会返回被切割的字符 import re ret = re.split("\d+","5as46asf46asf46a") ...

  10. php--学习封装类 (一)(操作mysql数据库的数据访问)

    <?php class DBDA //定义一个类 { //定义成员变量,不能直接定义,前面要加上public或者是private public $host = "localhost&q ...