Echarts中使用富文本rich设置样式

Echarts 中通过设置 rich 属性来实现富文本样式设置。

具体操作步骤如下：

1. 在 option 中的 series 的 label 属性中设置 formatter 函数，并在函数中使用 rich 属性设置样式。

option = {
    ...
    series: [{
        type: 'pie',
        data: [...],
        label: {
            formatter: function(params) {
                return '{a|' + params.name + '}：' + '{b|' + params.value + '}';
            },
            rich: {
                a: {
                    color: '#666',
                    fontSize: 14
                },
                b: {
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            }
        }
    }]
}

2. 在需要设置样式的文本内容中，用 {} 包含文本，并在文本后面用 | 分隔出样式属性。

例如，上述代码中的文本内容为 {a|apple} 和 {b|100}，其中 {a} 和 {b} 分别对应 rich 属性中定义的样式对象，| 后面的属性即为该样式对象中的属性值。

通过上述设置，即可在 Echarts 中实现对富文本样式的设置。

案例

// 鼠标悬浮时中心位置显示对应区域的信息
        emphasis: {
          label: {
            show: true,
            formatter: '{num|${c}}\n{b}',
            fontSize: '26px',
            fontWeight: 'bold',
            // color: () => {},
            lineHeight: 30,
              // 富文本样式-定义在使用的同级
              // 下方数据配置部分要 `{a|{c}}\n{b}` `{orgname|${name}}`
            rich: {
              num: {
                color: '#000',
                fontFamily: 'DIN',
                fontSize: '36px',
                fontWeight: '500',
                padding: [0, 0, 20, 0]
              },
              title: {
                color: '#868E9B',
                fontFamily: 'PingFang SC',
                fontSize: '16px',
                fontWeight: '500'
              }
            }
          }
        },