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