echarts legend 用rich自定義顏色

直接上代碼

const pieOptions = {
      color: [
        '#22F0AD',
        '#F9DB39'
      ],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} (件)',
        show: true,
        position: function(point, params, dom, rect, size) {
          // 其中point為當前鼠標的位置，size中有兩個屬性：viewSize和contentSize，分別為外層div和tooltip提示框的大小
          var x = point[0] //
          var y = point[1]
          var viewWidth = size.viewSize[0]
          var viewHeight = size.viewSize[1]
          var boxWidth = size.contentSize[0]
          var boxHeight = size.contentSize[1]
          var posX = 0 // x坐標位置
          var posY = 0 // y坐標位置

          if (x < boxWidth) { // 左邊放不開
            posX = 5
          } else { // 左邊放的下
            posX = x - boxWidth
          }

          if (y < boxHeight) { // 上邊放不開
            posY = 5
          } else { // 上邊放得下
            posY = y - boxHeight
          }

          return [posX, posY]
        }
      },
      legend: {
        orient: 'vertical',
        right: 0,
        top: 26,
        bottom: 20,
        data: [
          '已處理',
          '未處理'
        ],
        show: true,
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          rich: {
            a: {
              align: 'left',
              color: '#00E4FF',
              padding: [0, 5, 0, 5],
            },
            b: {
              color: '#FFFFFF',
            }
          }
        },
        formatter: function(name) {
          return '{a|' + name + '}{b|580件}'
        }
      },
      series: [
        {
          name: '處理情況',
          type: 'pie',
          radius: '100%',
          center: ['50%', '50%'],
          label: {
            show: false,
            position: 'center'
          },
          data: [
            { value: 335, name: '已處理' },
            { value: 310, name: '未處理' }
          ],
          animation: false
        }
      ]
    }

 

 

效果如下：