类似百度统计，有的时候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. 安卓学习资料推荐《深入理解Android:卷2》下载

    下载地址:百度云下载地址 编辑推荐 <深入理解Android:卷2>编辑推荐:经典畅销书<深入理解Android:卷I>姊妹篇,51CTO移动开发频道和开源中国社区一致鼎力推荐 ...

  2. MYSQL千万级别数据量迁移Elasticsearch5.6.1实战

    从关系型库中迁移数据算是比较常见的场景,这里借助两个工具来完成本次的数据迁移,考虑到数据量并不大(不足两千万),未采用snapshot快照的形式进行. Elasticsearch-jdbc,Githu ...

  3. 如何编写无须人工干预的shell脚本

    在使用基本的一些shell命令时,机器需要与人进行互动来确定命令的执行.比如 cp test.txt boo/test.txt,会询问是否覆盖?ssh远程登陆时,需要输入人工密码后,才可以继续执行ss ...

  4. Maven（二）Maven 的基本配置

    Maven 的基本配置 Maven 中仓库的概念 Maven 中的仓库是用拿过来存储所有项目的依赖关系的.当你创建一个 Maven 项目时,Maven 会通过依赖机制先到你本地仓库(自己维护的仓库)中 ...

  5. 使用ML-Agents Toolkit(0.5)训练游戏ai之环境搭建

    ML-Agents toolkit目前已经更新到0.5版本了. 要想使用这个Unity插件训练人工智能需要如下软件 1.Anaconda指的是一个开源的Python发行版本,主要是让你的训练环境与其它 ...

  6. iOS-监听原生H5性能数据window.performance

    WebKit-WKWebView iOS8开始苹果推荐使用WKWebview作为H5开发的核心组件,以替代原有的UIWebView,以下是webkit基本介绍介绍: 介绍博客 Webkit H5 - ...

  7. Redis（二）--- Redis的底层数据结构

    1.Redis的数据结构 Redis 的底层数据结构包含简单的动态字符串(SDS).链表.字典.压缩列表.整数集合等等:五大数据类型(数据对象)都是由一种或几种数结构构成. 在命令行中可以使用 OBJ ...

  8. Java EE.JSP.指令

    JSP的指令是从JSP向Web容器发送消息,它用来设置页面的全局属性,如输出内容类型等. JSP的指令的格式为:<%@ 指令名 属性="属性值"%> 1.page指令 ...

  9. Java编程基础阶段笔记 day01 Java语言概述

    ​目录内容 DOS命令 电脑配置 Java语言的特性 Java两种核心机制 Java语言环境搭建 第一个Java程序 注释 Java语句说明 编程风格 作业 常用的DOS命令 dir :    列出当 ...

  10. 50 行 Python 代码，带你追到女神

    今天来给大家分享一个撩妹技巧,利用 python 每天给你最心爱的人,发送微信消息,说声晚安. 废话不多说,源代码奉上 def get_news(): ... url = "http://o ...