echarts 圆环图+图例

 <div id="echarts1" style="width: 100%;height: 42vh;margin-top: 40px;">

data(){ 
    return{
      legendData: {
        orient: 'vertical',
        left: '55%',
        top: 'center',
        icon: 'circle', // 图例色块是方还是圆
        itemGap: 20,
        itemWidth: 6,
        padding: 0,
        selectedMode: false,
        triggerEvent: true,
        textStyle: { // 字符串模板
          rich: {
            a: {
              align: 'left',
              color: '#19273B',
              width: 130,
              padding: [0, 8, 0, 0]
            },
            b: {
              align: 'left',
              color: '#8D97A4',
              width: 55,
              padding: [0, 8, 0, 0]
            },
          }
        }
      },
    }
  }

      

 echarts1Handel() {
      let datas = [{ value: 1048, name: '婚姻家庭纠纷' },
      { value: 735, name: '邻里纠纷' },
      { value: 580, name: '房屋宅基地纠纷' },
      { value: 484, name: '合同纠纷' },
      { value: 300, name: '生产经营纠纷' },
      { value: 300, name: '损害其他纠纷' },
      { value: 300, name: '山林土地纠纷' },
      { value: 300, name: '土地承包经营纠纷' },
      { value: 300, name: '损害其他纠纷' },
      { value: 300, name: '其他纠纷' }]

      let allNum = 4647
      let chartDom = document.getElementById('echarts1');
      var oldChart = echarts.getInstanceByDom(chartDom);
      if (oldChart) {
        oldChart.dispose();
      }
      var myChart = echarts.init(chartDom);
      var option;

      this.legendData.formatter = function (name) {
        // _that.reasonInfoList 环形图的数据
        let str = ''
        let rate
        let value
        for (let i = 0; i < datas.length; i++) {
          if (datas[i].name === name) {
            // rate = datas[i].rate * 100 // 这里我处理了一下百分数
            value = datas[i].value
            console.log('rate', rate)
            str = `{a|${name}} {b|${((value / allNum) * 100).toFixed(2)}%} `
            return str // 因为只能返回一个值 所以将一行数据拼成一个字符串
          }
        }
      }


      var option = {

        color: ['#009DFF', '#71B8FE', '#7EE6A3', '#19BE6B', '#FFC607', '#F08E00', '#CD000E', '#E53600', '#FFA19E',],

        legend: this.legendData,


        label: {
          show: false,
          position: 'center'
        },
        tooltip: {

          formatter: '{b} : {c}人'
        },

        series: [
          {
            name: '费用类型分布统计',
            type: 'pie',
            center: ['25%', 'center'],
            radius: ['33%', '65%'],//真实数据的radius，这里的30%代表内圆，60%代表外圆，如果阴影中的radius设置为小于等于30%，代表为内阴影，大于60%代表为外阴影。
            avoidLabelOverlap: true,//是否启用防止标签重叠策略
            showEmptyCircle: true,//是否在无数据的时候显示一个占位圆
            label: {
              show: false,
              formatter: '{d}%',
              position: 'inside',
            },
            emphasis: { //聚焦时强调样式
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              },
            },
            labelLine: {
              show: true
            },
            data: datas,
          },
          //下方配置为echarts图表外边框配置详情，
          {
            name: '外边框',
            type: 'pie',
            tooltip: {
              show: false,
            },
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['25%', 'center'],//这里跟上面那组一样即可
            radius: ['40%', '40%'],//这里根据自己的需要自行调整，但是两个值要一样大哦，如果小于上方设置的最小内圆30%则为内阴影，大于外圆60%则为外阴影
            label: {
              normal: {
                show: false //重点：此处主要是为了不展示data中的value和name
              }
            },
            data: [{
              value: 1,//此处的值无所谓是多少
              name: '',//因为不展示label，可不填
              itemStyle: { //边框样式，此处我们设置的浅蓝色，颜色可自行修改
                normal: {
                  borderWidth: 20,//边框宽度
                  borderColor: 'rgba(255, 255, 249,  0.6)'//边框颜色
                }
              }
            }]
          },
        ]



      };


      option && myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },