【vue+echarts】多饼图显示、提示、颜色修改

最新推荐文章于 2023-10-11 12:04:16 发布

栀妹儿

最新推荐文章于 2023-10-11 12:04:16 发布

阅读量2.8k

点赞数 3

文章标签： vue.js echarts

本文链接：https://blog.csdn.net/weixin_38990605/article/details/110557589

版权

本文介绍如何在Vue项目中使用Echarts绘制多饼图，并详细讲解了如何修改提示信息和颜色。通过Echarts自带编辑器，快速实现饼图的个性化设置，包括在图表上显示不同内容和定制提示框。示例代码展示了如何利用`formatter`函数实现根据组件索引(componentIndex)展示不同信息。

摘要由CSDN通过智能技术生成

如何在vue中画echarts，见我的这篇：在 webpack 中使用 ECharts
这次是来修改饼图的，用到的临时编辑器：echarts自带编辑器
这个可以超快修改，泰方便啦！

先看修改前：
在这里插入图片描述

可以看到这里不能定义不同饼上的不同展示

再看修改后：左边饼图：用电量显示右边饼图：用电金额显示
好了来看看代码吧~

optionPie : {
   
     legend: {
   
         bottom: '30',
         left: '120',
         data: ['尖', '峰', '平', '谷']
     },
     tooltip: {
   
         trigger: 'item',
         //这里修改了官方的{a}啥啥啥，详情说明在下面呢
         formatter:function(data){
     
             if(data.componentIndex==0){
   
                 return '用电量' + "<br/>"+ data.name+ " : " + data.value[1] + "kW·h ("+data.percent.toFixed(