vue中使用echarts饼图——修改点击时出现的文本样式

先展示效果图

主要代码在emphasis的label标签里

1. 圆环中间出现的文本内容写在 label 的 formatter ；
2. 定义的样式写在 label 的 rich，其中aa,bb,cc都是自己随便起的样式名，|右侧是对应的文本，\n是换行；
3. {d}是每个部分对应的百分比，{b}是数据名，也就是 data 里name的值，bb是给后面%设置样式的；

下图来自echarts官网的配置项手册

代码如下

<template>
  <div ref="pieCon" style="width:500px;height:500px"></div>
</template>

export default {
  mounted() {
    let pieConOption = {
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          //是否 启用防止标签重叠策略
          avoidLabelOverlap: true,
          label: {
            // 尚未点击时环形中心是否出现内容
            show: false,
            // 点击后出现文本的位置
            position: 'center'
          },

          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold',
              formatter: "{aa|{d}}{bb|%}\n{cc|{b}}",
              rich: {
                aa: { color: 'green' },
                bb: { color: '#000', fontSize: '30', fontWeight: 700 },
                cc: { color: 'orange', backgroundColor: 'blue' }
              }
            }
          },
          data: [
            { value: 1048, name: '吃饭' },
            { value: 735, name: '睡觉' },
            { value: 580, name: '打豆豆' },
            { value: 484, name: '玩游戏' },
            { value: 300, name: '听歌' }
          ]
        }
      ]
    };

    let pieConCharts = echarts.init(this.$refs.pieCon);
    pieConCharts.setOption(pieConOption)
  }
}