
Echarts 中通过设置 rich 属性来实现富文本样式设置。
具体操作步骤如下:
- 在 
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'
                }
            }
        }
    }]
}- 在需要设置样式的文本内容中,用 
{}包含文本,并在文本后面用|分隔出样式属性。 
例如,上述代码中的文本内容为 {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'
              }
            }
          }
        },









