echart：legend中显示value+自定义文字样式

实现效果：

1、legend的icon设置为circle（圆形）

 

2、legend的文字分为两行，并且name和value已经后面的单位（家）文字样式都分别设置，利用富文本设置这样的效果

 

3、legend的icon需要跟第一行对齐，通过设置name的上padding来实现对齐效果，但是这种实现比较机械，不够完美。

4、在legend中显示value，这个需要使用legend的formatter 回调函数，并且data要从外部引入，完整代码如下：

<script>

  export var data = [{
      value: 16,
      name: '危化品企业'
    },
    {
      value: 1631,
      name: '非危化品企业'
    }
  ]

  export default {
    name: "CompanyChart4",
    components: {
      ChartTitle,
      DataDisplay2
    },
    data() {
      return {
        option: {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 0,
            left: 0,
            bottom: 'center',
            icon: "circle",
            textStyle: {
              color: "#ffffff",
              fontSize: 16,
              rich: {
                name: {
                  fontSize: 16,
                  color: "#ffaa00",
                  padding: [40, 0, 0, 0]//上，右，下，左
                },
                num: {
                  fontSize: 20,
                  padding: [10, 10],
                },
                unit: {
                  fontSize: 12,
                  color: "#ffaaff"
                },
              }
            },
            //格式化图例文本
            formatter(name) {
              var tarValue;
              for (var i = 0; i < data.length; i++) {
                if (data[i].name == name) {
                  tarValue = data[i].value;
                }
              }
              var v = tarValue;

              return [
                `{name|${name}}`,
                `{num|${v}}{unit|家}`,
              ].join("\n");
            }
          },
          series: [{
            name: '危化企业占比情况',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            left: 200,
            label: {
              show: true,
              position: 'outside',
              color: '#0e94ea'
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#0e94ea'
                },
                smooth: 0.2
              }
            },
            data: data
          }]
        }
      }
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initEchart();
      })
    },
    methods: {
      //初始化图表
      initEchart() {
        let chartDom = document.getElementById('chart4');
        let myChart = this.$echarts.init(chartDom);
        myChart.setOption(this.option);
      },
    }
  }
</script>