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

先给代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.min.js"></script>
</head>

<body>
    <div id="all_line" style="width:100%;height:500px;margin-top: 100px;"></div>

    <script>
        var obj = {};
        var text_data = ['http://www.baidu.com', 'https://www.sogou.com', 'http://www.333.com',
            'http://www.444.com', 'http://www.555.com', 'http://www.666.com', 'http://www.777.com',
            'http://www.888.com', 'http://www.999.com', '外部链接总计'
        ];
        for (var i = 0; i < text_data.length; i++) {
            if (i > 2 && (i < text_data.length - 1)) {
                obj[text_data[i]] = false;
            } else {
                obj[text_data[i]] = true;
            }
            obj[text_data[text_data.length - 1]] = true;
        }
        // console.log(obj)
        var myChart = echarts.init(document.getElementById('all_line'));
        myChart ? myChart.clear() : "";
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(255,255,255,0.8)',
                axisPointer: { // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
                    shadowStyle: {
                        color: 'rgba(150,150,150,0.2)'
                    }
                },
                textStyle: {
                    color: '#666',
                    fontSize: '14px',
                },
                extraCssText: 'width:220px;height:60%;padding:0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"',
                formatter: function (params) {
                    var htmlStr = "";
                    for (var i = 0; i < params.length; i++) {
                        var tem = params[i].name;
                        var val = params[i].value;
                        if (tem.indexOf('/') < 0) {
                            tem > 9 ? tem = tem + ":00 - " + tem + ":59" : tem = "0" + tem + ":00 - " +
                                "0" + tem + ":59";
                        }
                        val > 0 ? val = val : val = '--'
                        htmlStr +=
                            '<div style="height:26px;line-height:26px;overflow:hidden;padding:6px 8px;">' +
                            '<span style="float:left;max-width:160px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
                            '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                            params[i].color + ';"></span>' + params[i].seriesName + '</span>' +
                            '<span style="float:right">' + val + '</span>' + '</div>'
                    }
                    var res =
                        '<div><div style="height:40px;line-height:40px;padding:0 8px;background:rgba(237,233,233,0.4)">' +
                        tem + '<span style="float:right;">' + $('.table-echarts ul.group li.cur').text() +
                        '</span>' + htmlStr + '</div></div>'
                    return res;
                },
            },
            textStyle: {
                color: 'rgb(120, 122, 125)',
            },
            color: ['#4fa8f9', '#6ec71e', '#f56e6a', '#fc8b40', '#818af8', '#31c9d7', '#f35e7a', '#ab7aee',
                '#14d68b', '#cde5ff'
            ],
            grid: {
                top: 30, //越大越靠下,默认60
                bottom: 70
            },
            legend: {
                bottom: 1,
                itemGap: 15,
                itemWidth: 9,
                itemHeight: 10,
                textStyle: {
                    padding: [0, 0, 0, 8],
                },
                formatter: function (name) {
                    return (name.length > 14 ? (name.slice(0, 14) + "...") : name);
                },
                selected: obj,
                data: text_data
            },
            xAxis: [{
                type: 'category',
                // boundaryGap: false,//坐标轴两边留白策略
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    interval: 2
                },
                axisLine: {
                    lineStyle: {
                        color: "#ddd"
                    }
                },
                data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14',
                    '15', '16', '17', '18', '19', '20', '21', '22', '23'
                ],
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "transparent"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#eee',
                    }
                }
            }],
            series: [{
                    name: 'http://www.baidu.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'https://www.sogou.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'http://www.333.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'http://www.444.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'http://www.555.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'http://www.666.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'http://www.777.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'http://www.888.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: 'http://www.999.com',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: '5',
                    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]
                },
                {
                    name: '外部链接总计',
                    type: 'bar',
                    barWidth: '60%',
                    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]
                }
            ]
        })
        //echarts点击事件
        var oop = text_data.slice(0, 4);
        myChart.on('legendselectchanged', function (params) {
            // console.log(params);
            if (text_data.length > 4) {
                var legend_option = this.getOption();
                var selectArr = Object.values(params.selected)
                var num = 0;
                for (var i = 0; i < selectArr.length; i++) {
                    selectArr[i] === true ? num++ : "";
                }
                if (num > 4) {
                    oop.push(params.name);
                }
                if (num > 6) {
                    var hah = oop.slice(oop.length - 7, oop.length - 6)[0] + '';
                    legend_option.legend[0].selected[hah] = false;
                }

            }
            this.setOption(legend_option)
        });
        window.onresize = function () {
            myChart ? myChart.resize() : "";
        };
    </script>
</body>

</html>

直接copy就能看到效果。上面是限制了初始化显示legend的前三个和最后一个,用户点击最多显示6个。当然 你可以修改参数自己定义个数。

由于少于150个字不能发到博客园首页,所以我在多说几句:

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

Tips:

  1. 以上的数据都是虚拟的,只是为了方便查看效果。
  2. 为了不影响变量的作用域,建议把js放在jquery的ready函数里面。

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. 如何修改ECShop发货单查询显示个数

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

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

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

  7. PL/SQL中文显示都显示成“?”的问题

    PL/SQL中文显示都显示成“?”的问题  首先我在sqlplus里面查询到的中文是正常的,然后再oracle里面的注册表里面看得nls_lang是SIMPLIFIED CHINESE_CHINA.Z ...

  8. Linux显示一行显示列总计

    Linux显示一行显示列总计 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -t total used free shared buffers ca ...

  9. Linux显示只显示目录文件

    Linux显示只显示目录文件 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls -l -d */ drwxr-xr-x 2 root root 4096 1 ...

  10. Notepad++同一窗口显示左右显示两份文档

    Notepad++同一窗口显示左右显示两份文档   直接打开一份文档,test1.txt 再打开第二份文档,test2.txt,会显示成这样: 两份文档是以标签的形式展示的,有时需要同时查看两份文档, ...

随机推荐

  1. Unity导出xcode后自动化导入第三方SDK

    最近因为在给项目接入第三方SDK,遇到了一个比较烦人的事情就是,每次出包都要重新根据第三方SDK说明设置xcode,每次最少花20分钟来设置,如果出错的话就不一定是20分钟的事了,所以我决定要做一个自 ...

  2. 关于php语言的使用! ------php语言与JavaScript的使用 方法是相似

    <script type="text/javascript"> </script>--js与PHP同是一种弱类型语言 弱类型语言只是不显示表现  定义变量时 ...

  3. 创建DirectInput接口对象说明---(void **)&amp;m_pDI

    读别人代码时遇到的,起初没明白过来这是怎么回事,后来忽然想明白了. if (FAILED(DirectInput8Create(appInstance, DIRECTINPUT_VERSION, II ...

  4. JSP--监听HTTP会话

    来源: <http://www.cnblogs.com/eflylab/archive/2007/01/16/621953.html> ServletListener 之 监听HTTP会话 ...

  5. (转)iOS学习之 plist文件的读写

    在做iOS开发时,经常用到到plist文件, 那plist文件是什么呢? 它全名是:Property List,属性列表文件,它是一种用来存储串行化后的对象的文件.属性列表文件的扩展名为.plist ...

  6. Flume 入门--几种不同的Sources

    1.flume概念 flume是分布式的,可靠的,高可用的,用于对不同来源的大量的日志数据进行有效收集.聚集和移动,并以集中式的数据存储的系统. flume目前是apache的一个顶级项目. flum ...

  7. npm 使用 taobao 的镜像后,无法 login &amp; publish

    使用 npm adduser,添加用户之后,没有异常消息,然后使用 npm publish 发布,却报错: 401 原来是 npm 使用 taobao 的镜像后,需要指定 --registry htt ...

  8. Windows Java包环境变量的设置

    复制Bin文件所在路径 验证

  9. 《Effective Java中文版第二版》读书笔记

    说明 这里是阅读<Effective Java中文版第二版>的读书笔记,这里会记录一些个人感觉稍微有些重要的内容,方便以后查阅,可能会因为个人实力原因导致理解有误,若有发现欢迎指出.一些个 ...

  10. JAVA集合接口及类

    各接口及类关系图 Iterable 所有集合的初始接口,实现该接口可进行foreach操作,只有一个iterator()方法,并返回iterator类型: Iterable在java.lang下,It ...