echarts图例过长时的处理方式

最新推荐文章于 2024-04-08 16:38:17 发布
最新推荐文章于 2024-04-08 16:38:17 发布
阅读量2k 收藏 6
点赞数
分类专栏： echarts 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44481459/article/details/106762060
版权

我们在使用echarts时可能会遇到图例过长展示不下的情况，特别是页面在分辨率较低的电脑上，如下图
在这里插入图片描述
这时只需要加几行代码就可以使图例变为可滑动：
代码如下
lengend： {
type: ‘scroll’, (最主要是设置类型)
pageTextStyle: {
color: ‘#fff’ //文字颜色
},
pageIconColor: ‘white’, 可点击时按钮的颜色
pageIconInactiveColor: ‘#444444’, 不能点击时按钮的颜色
}
处理后
更多的样式设置请查看echarts官网
https://echarts.apache.org/zh/option.html#legend.scrollDataIndex

weixin_44481459
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echart饼图图例（legend）与tooltip内容不一致的以及图例过长的处理
qq_36398269的博客
10-29 3274
在legend里写formatter回调函数进行内容拼接 1.此处由于图例太长，同时在回调函数里写了拼接函数 2.这样的写法要注意大的option{}，需要写成let option={}；如果写成this.option后回调函数不起作用 legend: { orient: 'vertical', left:'58%', top:'24...
echarts单双击事件并存demo.html
12-02
在echarts点击事件基础上添加单击和双击事件，使单双击事件并存。该资源为用html和jquery实现的简单的单双击事件并存的demo。
Echarts饼图图例太长解决方案
小轩的学习日志
09-26 1989
解决饼图图例文本太长 问题 方案 formatter: function(name) { return echarts.format.truncateText(name, 50, '12px Microsoft Yahei', '…') }, tooltip: { show: true } 完整代码 legend: { type: 'scroll', orient: 'vertical', right: 0,
echarts饼图图例文字过长点击显示全部
最新发布
u011233151的博客
04-08 170
echart饼图图例文字过长点击显示全部
Echarts中的图例文字过长的问题
泊耳的笔记本
12-16 1401
需要对图例文字进行剪裁，并开启tooltip，以便满足需求 legend:{ formatter: function (name) { if (!name) return ''; if (name.length > 5) { name = name.slice(0,5) + '...'; } return name }, too
Echarts的legend图例中的文字长度过长
kalinux的博客
12-19 7360
1，如图所示，文字长度过长 2，网上很多解决办法是通过修改textStyle/rich，去修改width： textStyle: { rich:{ a: { width: 11 }, }, } 但是不知道是版本原因，还是啥，我怎么改都没有用 3，最后用 的formatter解决的： const dealWith = function(name:any){ .
echarts 图例文字过长
weixin_40690783的博客
06-16 1439
超出几个字符隐藏（用…省略），鼠标悬浮时显示 legend: { formatter: function (name) { if (!name) return ''; //超出几个字符隐藏，鼠标悬浮时显示 if (name.length > 8) {
echarts设置图例颜色和地图底色的方法实例
12-09
本来想写echarts初始化函数的，但最近因为要写一个地图与柱状图的混合方式，也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。 1、地图的一些基本属性就不介绍了，还是那些style 2、地图数据的获取以及...
ECharts 事件处理
12-14
ECharts 事件处理 ECharts 中我们可以通过监听用户的操作行为来回调...还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件），数据区域缩放时触发的 ‘d
解决echarts数据二次渲染不成功的问题
10-15
但在第二次尝试渲染新数据时，由于`notMerge`参数未设置为`true`，ECharts继续合并新的数据与旧的数据，导致图表并未反映出最新的数据变化。 解决这个问题的关键在于调用`mychart.setOption({}, true)`。这里，第二...
jsp利用echarts实现报表统计的实例
10-21
总的来说，ECharts为JSP开发人员提供了一种高效且灵活的方式来生成报表，它能够处理各种类型的数据，提供丰富的定制选项，同时保持良好的性能和用户体验。通过结合JSP和ECharts，你可以创建出符合业务需求的精美数据...
echarts图例过长截断加省略号，并增加title
lixiaonaaa的博客
08-17 964
legend: { show: true, data: legendArr, type: 'scroll', orient: 'vertical', left: 10, top: 300, // selectedMode: 'single', formatter: function (name) { // if (!name.
echarts的legend(图例)中图例文本过长换行
weixin_45428021的博客
12-13 1237
legend: { orient: 'vertical', right: 0, top: 30, itemWidth:12, itemHeight:8, textStyle:{ lineHeight:20, }, padding:0, formatter:function(params) { let tip1 = ".
【echarts】legend长度过长，内容过多导致换行怎么办？
hzxOnlineOk的博客
09-12 1763
通过设置翻页即可解决该问题。
echarts的legend过多溢出显示分页
huanhuan03的博客
05-09 7176
echarts legend legend太多 legend太多显示分页
echarts legend名称过长自定义换行显示
想搞全栈的前端
01-20 2283
效果如图 代码如下 formatter: function (params) { //超过十个字符就换行展示 var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 5;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示
echarts图例过多显示问题
weixin_38912662的博客
12-29 4749
echarts图例过多时分页处理
收藏！Echarts 数据可视化开发中的一些技巧和常见问题汇总
code小生
02-14 526
点击上方“逆锋起笔”，公众号回复编程资源 领取大佬们推荐的学习资料 原文地址:https://juejin.cn/post/6926378974062837773在做数据可视化开发过程中...
echarts图例移入
08-27
要实现echarts图例移入效果，可以使用echarts的事件监听器和图例的相关事件。具体步骤如下： 1. 在echarts初始化配置中，设置图例的hoverLink属性为true，以开启图例的鼠标移入效果。 ``` option = { ... legend: { hoverLink: true, ... }, ... }; ``` 2. 使用echarts的事件监听器，监听图例的鼠标移入事件（legendselectchanged）。 ``` myChart.on('legendselectchanged', function(params) { // 在这里编写图例移入时的处理逻辑 console.log(params); // 输出图例移入时的参数信息，可根据需要进一步处理 }); ``` 3. 在图例移入事件的处理逻辑中，你可以根据需要进行相应的操作，例如改变某个系列的颜色、显示/隐藏某个系列等。 ``` myChart.on('legendselectchanged', function(params) { // 获取当前被移入的图例名称 var legendName = params.name; // 根据图例名称执行相应的操作 if (legendName === '系列一') { // do something for series 1 } else if (legendName === '系列二') { // do something for series 2 } }); ``` 通过以上步骤，你可以实现echarts图例移入效果，并在图例移入事件中编写相应的处理逻辑。具体的操作根据你的需求而定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值