echarts legend 限制规定显示个数，显示省略号，修改默认样式
类似百度统计，有的时候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:200px;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点击事件
myChart.on('legendselectchanged', function (params) {
var legend_option = this.getOption();
//手动改变legend的selected状态:
// legend_option.legend[0].selected[name] = false;
//切换tooltips的高度
var selectTotal = 0;
var tem = Object.values(params.selected);
for (var j = 0; j < tem.length; j++) {
if (tem[j] === true) {
selectTotal += 1;
}
}
// console.log(selectTotal)
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";
this.setOption(legend_option)
});
window.onresize = function () {
myChart ? myChart.resize() : "";
};
</script>
</body> </html>
直接copy就能看到效果。上面是限制了初始化显示legend的前三个和最后一个。因为之前的版本出了点问题删了部分代码，如果要改变legend的select状态，请自行在代码中的echarts点击事件中根据我提供的方法进行修改，如若不明白可以打印点击事件的params查看。
Tips：
- 以上的数据都是虚拟的，只是为了方便查看效果。
- 为了不影响变量的作用域，建议把js放在jquery的ready函数里面。
- 如果是vue项目，可自行调整以上代码或留言获取。
我再多说几句：
在用数据刷新echarts图表时，最好先用clear()函数去清空(echarts自带的api)，还有就是其实echarts完全可以由数据渲染，比如说上面的例子，它的颜色可以事先定义一个数组，把可能用到的颜色放入这个数组，然后通过你legend的个数从数组去length相同的值组成新数组，然后以变量的形式去配置。上面例子用自定义的formatter去修改了tooltip的颜色以及legend的样式。
echarts legend 限制规定显示个数，显示省略号，修改默认样式的更多相关文章
- Silverlight中DataGrid的显示指定列、修改默认列名和格式化日期数据和小数数据
一:DataGrid的显示指定列.修改默认列名 使用自动生成列,就会无区别的按缺省格式展示所有项目.除了bit类型,其他类型项目会以字符串形式展现. 通过设置Columns属性,可以选择性的显示列,以 ...
- easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- css：在容器内文字超过容器范围，显示一行加省略号或者两行加省略号
一.显示一行加省略号:各浏览器兼容 .box{ width: 100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } ...
- WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip
原文:WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip [TextBlock] 换行 TextWrapping="W ...
- CSS一行显示，显示不下的用省略号显示
CSS一行显示,显示不下的用省略号显示 .abc{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 复制上面代码即可 ...
- 如何修改ECShop发货单查询显示个数
使用ecshop的朋友都知道,商城首页调用的发货单查询,默认显示的10个.很多朋友想修改它的数量,可是在后台管理却找不到相应的地方,这个修改和显示排行榜的数量修改方法不一样.排行榜是可以在后台修改的, ...
- Echarts的提示（Tooltip）显示额外内容
官方一般都是: 而我们通常是需要显示额外内容的,比如这样 其中Tooltip也是参考了网友的写法 option = { tooltip: { trigger: 'axis', formatter: f ...
- echarts legend 图例文字闪烁显示
最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...
- TOAD和PLSQL 默认日期显示、rowid显示、TNSNAME的修改
先说下要解决的问题: select rowid,acct_id,state_date from acct; 修改后,1)sql指明rowid,可以显示出来 2)时间格式显示为YYYYMMDD HH24 ...
随机推荐
- 《ASP.NET Core 高性能系列》致敬伟大的.NET斗士甲骨文!
写在开始 三年前,曾写过一篇文章:从.NET和Java之争谈IT这个行业,当时遭到某些自认为懂得java就了不起的Javaer抨击, 现在可以致敬伟大的.NET斗士甲骨文了 (JDK8以上都需要收费, ...
- java 带静态域的导出类创建时都发生了什么？
先按从基类到导出类的顺序初始化静态域(之前已经初始化过的静态域不再初始化) 再按从基类到导出类的顺序初始化类,即基类普通字段+基类构造器主体+导出类字段+导出类主体... package test; ...
- Java操作文件
import java.io.File; import java.io.IOException; import java.nio.file.*; import java.nio.file.attrib ...
- MyBatis从入门到精通：select较深层次的用法
一,简单的情形 需求: 根据用户id获取用户拥有的所有角色,返回的结果为角色集合. 1.接口中增加的方法: List<SysRole> selectRolesByUserId(Long u ...
- JDK1.8--体验Stream表达式，从一个对象集合中获取每一个对象的某一个值返回新集合
xl_echo编辑整理,欢迎转载,转载请声明文章来源.更多IT.编程案例.资料请联系QQ:1280023003 百战不败,依不自称常胜,百败不颓,依能奋力前行.——这才是真正的堪称强大!! --- 开 ...
- 个人永久性免费-Excel催化剂功能第46波-区域集合函数，超乎所求所想
在常规自定义函数的世界中,一般情况下,仅会输入一堆的参数,最终输出一个结果值,在以往Excel催化剂的自定义函数,已经大量出现输入一堆参数返回多个结果值并自动输出到多个单元格区域内.此项技术可运用的场 ...
- git,github,gitlab，码云的区别
git 是版本控制工具. github https://github.com/和gitlab https://about.gitlab.com/都是基于git仓库的web开发流程代码托管平台.两者的区 ...
- hdu6375 度度熊学队列
度度熊学队列 题目传送门 解题思路 STL大法好.直接用deque,但是N的范围很大,如果直接开那么多的deque会爆内存,所以用map< int, deque< int>>, ...
- tomcat用做图片服务器
最近做了个小网站,就是用tinyce富文本编辑器,https://www.511easy.com/ 保持字体排版和图片 发现博客园的图片,一天之后就无法显示 就想着自己做一个图片服务器,上传图片到指定 ...
- 或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧
一.前言 在目前的软件开发的潮流中,不管是前后端分离还是服务化改造,后端更多的是通过构建 API 接口服务从而为 web.app.desktop 等各种客户端提供业务支持,如何构建一个符合规范.容易理 ...