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,
        //   },
        // },
      },
    },
  }],
}