echarts相关属性设置（3）环状图

option = {
  grid: {
    left: '3%',
    top: '0%',
    // height: 500,
    right: '30%',
    containLabel: true,
  },
  legend: {
    orient: 'vertical', 
    align: 'left', //图例小图标在图例文字的哪个方向，这里设置为左侧
    y: 'top',
    x: 'right',
    icon: 'circle', //设置图例小图标的样式，这里控制
    right: '0%',
    textStyle: {
      color: '#999',
      fontSize: 10,
      rich: {
        white: {
          color: 'white',
          fontSize: 10,
        },
      },
    },
    itemWidth: 5,
    itemHeight: 5,
    data: ['名称1', '名称2', '名称3', '名称4'],
    formatter(name: any) { //给图例进行设置（有名称，有数据，有单位）
      const data = res.series[0].data;
      const idx = findIndex(data, (it: any) => it.name === name);
      if (idx !== -1) {
        return `${name}: {white|${data[idx].value}}票`;
      }
      return name;
    },
  },

  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}：{d}%',
  },

  series: [{
    name: '大名城',
    type: 'pie',
    radius: ['30%', '50%'],
    color: ['#00d395', '#1616fb', '#6a00fd', '#009fff'],
    center: ['25%', '32%'],
    x: '0%', // for funnel

    data: [{
      value: this.arrivrdWithoutUnloda,
      name: '名称1',
    }, {
      value: this.unloadWithoutSort,
      name: '名称2',
    }, {
      value: this.sortedWithoutLoad,
      name: '名称3',
    }, {
      value: this.loadedWithoutDepart,
      name: '名称4',
    }],
    labelLine: {
      normal: {
        show: false,
        length: 3,
        length2: 3,
        lineStyle: {
          color: '#12EABE',
          width: 1,
        },
      },
    },
    label: {
      normal: {
        show: false,
        // formatter: '{c|{b}}\n{d|{d}%}',
        // rich: {
        //   b: {
        //     fontSize: 10,
        //     color: '#12EABE',
        //     align: 'left',
        //     padding: 0,
        //   },
        //   d: {
        //     fontSize: 10,
        //     align: 'left',
        //     padding: 0,
        //   },
        //   c: {
        //     color: '#fff',
        //     fontSize: 10,
        //     align: 'left',
        //     padding: 0,
        //   },
        // },
      },
    },
  }],
}