关于vue.js:Echarts-自定义-label标签-formatter的样式

如图所示，我须要自定义价格千分位显示，以及字体款式调整

依据官网文档，能够通过 formatter 函数自定义返回内容。
通过 | 自定义属性名字
联合 rich 调整每个字符的款式。

间接上代码

  option1: {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : ￥{c} ({d}%)'
    },
    series: [
      {
        name: '费用占比',
        type: 'pie',
        radius: [50, 140],
        roseType: 'area',
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {formatter (params) {return `{name|${params.name}}\n￥{value|${(+params.value).toLocaleString('en-US')}}  {percent|${params.percent}}%`
          },
          rich: {
            name: {
              color: '#86909C',
              fontSize: 12,
              lineHeight: 26
            },
            value: {
              color: '#1D2129',
              fontSize: 14,
              lineHeight: 22
            },
            percent: {
              color: '#1D2129',
              fontSize: 14,
              lineHeight: 22
            }
          }
        },
        data: [{ value: 10000, name: 'rose 2'},
          {value: 5000, name: 'rose 2'},
          {value: 2000, name: 'rose 3'},
          {value: 1000, name: 'rose 5'},
          {value: 1000, name: 'rose 6'}
        ]
      }
    ]
  }