echart 實現label的內容展示不同的樣式

 實現效果如圖，在里邊的那個餅圖中，label的內容展示不同的樣式

 

 

 

這個實現有兩個要點

1.里邊的餅圖沒有使用主題中默認的顏色

2.label的內容的樣式不同

實現方式

 series: [
        {
          name: '',
          type: 'pie',
          selectedMode: 'single',
          radius: ['0', '45%'],
          roam: true,
          label: {
            position: 'center',
            formatter: (data, type) => {
              let info = data.data;
              let str = `{a|${info.value}}\n\n {b|${info.name}}`; //這里對不同的內容進行標識 a，b，或者可以隨便自己起個別的名字
              return str;
            },
            color: 'white',
            rich: { //在rich中對兩個標識進行樣式修改
              a: {
                fontSize: 24
              },
              b: {
                fontSize: 12
              }
            }
          },
          itemStyle: { //這個屬性是使用自己的顏色，而不是使用主題中的默認顏色 color: '#293441' },
          labelLine: {
            show: false
          },
          data: data.series[0]
        },
        {
          name: '',
          type: 'pie',
          radius: ['45%', '80%'],
          label: {
            position: 'inner'
          },
          data: data.series[1]
        }
]