关于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', // 没激活的分页按钮颜色
          },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

解决vite打包后白屏之router-view不生效问题
这篇文章主要介绍了解决vite打包后白屏之router-view不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Element UI表单组件进行通信的代码详解
Element UI是一个为Vue.js开发的优秀 UI 组件库,它提供了丰富的组件,包括表单组件,Element UI的表单组件可以帮助开发者快速构建和管理表单,提高开发效率,在实际开发中,我们经常需要在表单组件之间进行通信,本文将详细介绍Element UI表单组件如何进行通信
2025-02-02
vue中手动封装iconfont组件解析(三种引用方式的封装和使用)
这篇文章主要介绍了vue中手动封装iconfont组件(三种引用方式的封装和使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
antd的选择框如何增加tab选中的方法示例
这篇文章主要为大家介绍了antd的选择框如何增加tab选中的方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
详解如何在Vue中动态添加类名
本文主要介绍了如何在Vue中动态添加类名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
使用vue-antDesign menu页面方式(添加面包屑跳转)
这篇文章主要介绍了使用vue-antDesign menu页面方式(添加面包屑跳转),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
解决VUE框架导致绑定事件的阻止冒泡失效问题
下面小编就为大家分享一篇vue监听滚动事件实现某元素吸顶或者固定位置显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue-cli脚手架打包静态资源请求出错的原因与解决
这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
浅谈Vue父子组件和非父子组件传值问题
本篇文章主要介绍了浅谈Vue父子组件和非父子组件传值问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-08-08
Vite引入虚拟文件的实现
本文主要介绍了Vite引入虚拟文件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08