echarts图表中的legend显示百分比

效果图

代码

<template>
   <div ref="industryCharts" style="width:450px;height:270px" :style="{display:industryShow}"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data(){
    return{
        industryCharts:{},
        industryData:[{
            name:'aaaa',
            value:'1'
        },{
            name:'bbbb',
            value:'3'
        },{
            name:'ccccc',
            value:'2'
        }],
    }
  },
  mounted:function(){
    let _self = this
    _self.industryInitCharts();
  },
  computed:{
    //行业分类
    industryOpt(){
      let that = this;
      let industryOption = {
        color:['#5074F9','#508EF9','#5DC7FE','#42D8B0','#9BD23C'],
        tooltip: {
            trigger: 'item'
        },
        legend: {
          orient:'vertical',
          top:70,
          left:260,
          formatter:function(name){  //该函数用于设置图例显示后的百分比
            var total = 0;
            var value;
            // debugger;
            that.industryData.forEach((item)=>{
                total += Number(item.value);
                if (item.name == name) {
                    value = item.value;
                }
            })
            var p = Math.round(((value / total) * 100)); //求出百分比
            return `${name}     |      ${p}%`;  //返回出图例所显示的内容是名称+百分比
          },
          textStyle: { //图例文字的样式
                color: '#ADADAD',
                fontSize: 12
          },
        },
        series: [
            {
              name: '访问来源',
              type: 'pie',
              left:-180,
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                  show: false,
                  position: 'center'
              },
              emphasis: {
                  label: {
                      show: false,
                      fontSize: '40',
                      fontWeight: 'bold'
                  }
              },
              labelLine: {
                  show: false
              },
              data: that.industryData.length==0?[null]:that.industryData
            }
        ]
      }
      return industryOption;
    }, 
  },
  methods:{ 
    //行业分类
    industryInitCharts(){
        this.industryCharts = echarts.init(this.$refs.industryCharts);
        this.industryCharts.setOption(this.industryOpt);
    },
  }
}
</script>

<style>
 .industryClassification{
    width: 100%;
    height: 340px;
    background-color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
 }
  .industryClassification_title{
  width: 40%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
}
.noDataMsg{
  width: 100%;
  height: 270px;
  border-radius: 5px;
}
</style>