vue如何实现echart饼图legend显示百分比

小编给大家分享一下vue如何实现echart饼图legend显示百分比，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

效果图

实现源码

option = {    title : {        text: '某站点用户访问来源',        subtext: '纯属虚构',        x:'center'    },    tooltip : {        trigger: 'item',        formatter: "{a} 
{b} : {c} ({d}%)"    },    legend: {        orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'         // 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）        x: 'left',        // 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）        y: 'bottom',        // 重写legend显示样式        formatter: function(name) {              // 获取legend显示内容              let data = option.series[0].data;              let total = 0;              let tarValue = 0;              for (let i = 0, l = data.length; i < l; i++) {                  total += data[i].value;                  if (data[i].name == name) {                      tarValue = data[i].value;                  }              }              let p = (tarValue / total * 100).toFixed(2);              return name + ' ' + ' ' + p + '%';          },        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']    },    series : [        {            name: '访问来源',            type: 'pie',            radius : '55%',            center: ['50%', '60%'],            data:[                {value:335, name:'直接访问'},                {value:310, name:'邮件营销'},                {value:234, name:'联盟广告'},                {value:135, name:'视频广告'},                {value:1548, name:'搜索引擎'}            ],            itemStyle: {                emphasis: {                    shadowBlur: 10,                    shadowOffsetX: 0,                    shadowColor: 'rgba(0, 0, 0, 0.5)'                }            }        }    ]};

看完了这篇文章，相信你对"vue如何实现echart饼图legend显示百分比"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！