echarts环形饼图显示百分比和数值(legend显示百分比方法)

 分类:echarts时间:2022-06-20点击: 2022前端视频教程(自学必看)

echarts饼图设置下就变成很酷炫漂亮的环形饼图,今天分享在echarts环形饼图显示百分比和数值,是在图例legend中可以展示名称及数值和百分比的方法,通过Math.round((tarValue / total) * 100) + '%'计算出百分比,name是名称, v是数值。

1、echarts环形饼图legend显示百分比和数值,实例代码如下:  

legend: {
         type: 'plain',
         orient: 'vertical',
         left: '65%',
         top: 'center',
         align: 'left',
         itemGap: 6,
         itemWidth: 10, // 设置宽度
         itemHeight: 10, // 设置高度
         icon: 'circle',
         symbolKeepAspect: false,
         formatter: function (name) {
           let data = option.series[0].data
           // console.log(data, 'data')
           let total = 0
           let tarValue
           for (let i = 0; i < data.length; i++) {
             total += data[i].value
             if (data[i].name == name) {
               tarValue = data[i].value
             }
           }
           let v = tarValue + '人'
           //计算出百分比
           let p = Math.round((tarValue / total) * 100) + '%'  
           return `${name}  ${v}  ${p}`
           //name是名称,v是数值
         },
}

2、效果如下图:

echarts环形饼图显示百分比和数值

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: