关于Echarts饼图图例太长的解决方案
更新时间：2023年02月08日 14:38:54 作者：沈亦轩
这篇文章主要介绍了关于Echarts饼图图例太长的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
解决饼图图例文本太长
问题
方案
formatter: function(name) {
return echarts.format.truncateText(name, 50, '12px Microsoft Yahei', '…')
},
tooltip: {
show: true
}
完整代码
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
top: 5,
bottom: 0,
itemWidth: 20,
itemHeight: 15,
itemGap: 2,
textStyle: {
color: '#76b9ff',
fontSize: '12px'
},
pageIconColor: '#76b9ff',
pageTextStyle: {
color: '#76b9ff'
},
formatter: function(name) {
return echarts.format.truncateText(name, 50, '12px Microsoft Yahei', '…')
},
tooltip: {
show: true
}
效果
e-charts图例过多问题
饼图的图例，如果过多，需要增加 分页按钮
注意！！！ 如果测试用例数量不够，则分页按钮不会出现，会默认将画面填满后，分页按钮才会出现
我之前只用了两三个，总是不出现 气死了
legend: {
top: '15%',
type: 'scroll',
orient: 'vertical',
left: 'left',
// pageIconColor: 'red', // 激活的分页按钮颜色
// pageIconInactiveColor: 'yellow', // 没激活的分页按钮颜色
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了validate 注册页的表单数据校验实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家详细介绍了Vue+Element ui实现树形控件右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
解析vue 3.0 使用axios库发起 post get 的配置过程
get post 请求开发中最普通最常见的请求方式但是在vue中如何实现呢 这里记录一下配置过程，对vue 使用axios发起 post get配置过程感兴趣的朋友一起看看吧2022-05-05
状态管理也就是数据状态管理，vue应用程序的各组件之间经常需要进行通信，除了v-on、EventBus等通信方式外，可以采用数据共享的方式进行通信。这种简单的数据共享模式就是store模式。2021-05-05
这篇文章主要介绍了Vue中使用插槽（slot）、聚类插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家介绍了在IDEA中Debug调试VUE前端项目，只需要两步就可以调试JS的实现方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的数据双向绑定功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值。感兴趣的朋友跟随小编一起看看吧2019-04-04
在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用,感兴趣的小伙伴可以了解下2024-01-01
解决element-ui中Popconfirm气泡确认框的事件不生效问题
这篇文章主要介绍了解决element-ui中Popconfirm气泡确认框的事件不生效问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论