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

总结

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

您可能感兴趣的文章:

详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
这篇文章主要介绍了详解关于表格合并span-method方法的补充(表格数据由后台动态返回) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
Vue中使用正则表达式进行文本匹配和处理的方法小结
正则表达式在Vue中具有广泛的应用场景,包括文本匹配和处理、表单验证等,通过本文的介绍和示例,希望读者能更好地理解和应用正则表达式在Vue中的使用方法,感兴趣的朋友一起看看吧
2023-11-11
Vue文件如何代替传统的HTML文件
随着前端工程化的不断推进,传统的HTML、CSS、JavaScript三者分离的开发模式逐渐显露出一些不足之处,尤其是在构建复杂的单页应用（SPA）时,Vue.js作为一个现代化的前端框架,提供了多种工具和技术来简化开发流程,本文将探讨.vue文件是如何替代传统HTML文件的角色
2024-10-10
Vue-cli框架实现计时器应用
这篇文章主要为大家详细介绍了Vue-cli框架实现计时器应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue watch监听数据变化的案例详解
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化，本文将通过代码示例为大家详细的介绍一下vue watch如何监听数据变化,需要的朋友可以参考下
2023-07-07
基于VUE实现简单的学生信息管理系统
这篇文章主要介绍了VUE实现一个简单的学生信息管理系统,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
vue中如何实现pdf文件预览的方法
这篇文章主要介绍了vue中如何实现pdf文件预览的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue模拟数据,实现路由进入商品详情页面的示例
今天小编就为大家分享一篇Vue模拟数据,实现路由进入商品详情页面的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue如何监听el-select选择值的变化
这篇文章主要介绍了vue如何监听el-select选择值的变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue+intro.js插件实现引导功能
使用 intro.js这个插件,来实现一个引导性的效果,经常在一些新手引导页遇到这样的需求,下面通过本文给大家分享vue+intro.js插件实现引导功能,感兴趣的朋友一起看看吧
2024-06-06