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
            },
            ...
        }
    }
}