vue 中使用echarts的title富文本不生效,解决办法

这里看文档有点坑啊，页面

      <el-col class="chart-area" :span="8">
        <div class="box chart">
          <ve-histogram :title="chartTitle" :data="chartData" :settings="chartSettings"></ve-histogram>
        </div>
      </el-col>

 有效配置

        chartTitle: {
          text: '{b_title|收入趋势}{b_unit|（单位/万元）}',
          textStyle: {
            rich:{
              // label: {
              //   formatter: ['{b_title|收入趋势}{b_unit|（单位/万元）}'].join('\n'),
              // },
              b_title: {
                color: 'red',
              },
              b_unit: {
                color: 'blue',
              }
            }
          },
        },

效果

根据官网的配置，照着官网的配置死活没有效果，于是想啊，然后看到下面配置style有了疑惑

上面个是title.textStyle.rich.自定义class.color

在例子确是title.textStyle.rich.label.normal.rich.自定义class.color 不一致，可能是这个例子有别的用法吧，不是很理解。

label: {
    normal: {

        // 在文本中，可以对部分文本采用 rich 中定义样式。
        // 这里需要在文本中使用标记符号：
        // `{styleName|text content text content}` 标记样式名。
        // 注意，换行仍是使用 '\n'。
        formatter: [
            '{a|这段文本采用样式a}',
            '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
        ].join('\n'),

        rich: {
            a: {
                color: 'red',
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: 'xxx/xxx.jpg'
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: 'Microsoft YaHei',
                borderColor: '#449933',
                borderRadius: 4
            },
            ...
        }
    }
}