vue 中 Echarts 富文本如何使用

很早的一篇文章中我寫了 Echarts 富文本不生效的解決辦法，很多人看不明白，再來解釋一下，如果你的寫法沒有出問題的話，在頁面中還是不能正常顯示你想要的樣式，那麼就要考慮是不是 echarts 的版本過低，建議升級使用

效果圖 和 代碼如下：

 

<div class="echarts-content" ref="echartsRich">
</div>
let myChart = this.echarts.init(this.$refs.echartsRich)
let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{c}%'
        },
        color: ['#7ACCC4'],
        xAxis: {
          name: 'Accuracy (%)',
          nameLocation: 'middle',
          nameGap: 31
        },
        // 要改變Y軸label的樣式，就需要在對應 yAxis 中配置
        yAxis: {
          name: 'rich',
          type: 'category',
          nameLocation: 'start',
          inverse: true,
          data: ['white', 'yellow', 'black', 'red', 'brown', 'Others'], // 這是label上的數據
          axisLabel: {
            // 回調函數中的value就是label的數據
            formatter: function (value) {
              switch (value) {
                case 'white': 
        // 當數據是White的時候，使用 white樣式，書寫方法就是，‘樣式名稱|對應label’
                  return '{white|' + value + '}'
                case 'yellow':
                  return '{yellow|' + value + '}'
                case 'black':
                  return '{black|' + value + '}'
                case 'red':
                  return '{red|' + value + '}'
                case 'brown':
                  return '{brown|' + value + '}'
                case 'Others':
                  return '{Others|' + value + '}'
                default:
                  return '{Others|' + value + '}'
              }
            },
        // 上邊用的樣式，就是在rich裏邊定義的，直接使用就可以
            rich: {
              white: {
                width: 50,
                height: 20,
                backgroundColor: '#fffcf4',
                borderColor: 'rgba(201, 181, 103, 0.4)',
                align: 'center',
                borderWidth: 1
              },
              yellow: {
                width: 50,
                height: 20,
                backgroundColor: '#ffefca',
                align: 'center',
                borderWidth: 1
              },
              black: {
                width: 50,
                height: 20,
                backgroundColor: '#6d5b55',
                align: 'center',
                color: '#FFF',
                borderWidth: 1
              },
              red: {
                width: 50,
                height: 20,
                backgroundColor: '#ff8989',
                color: '#FFF',
                align: 'center',
                borderWidth: 1
              },
              brown: {
                width: 50,
                height: 20,
                backgroundColor: '#82603c',
                align: 'center',
                color: '#FFF',
                borderWidth: 1
              },
              Others: {
                width: 50,
                height: 20,
                align: 'center',
                backgroundColor: 'rgba(200, 200, 200, 0)'
              }
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '40%', // bar的寬度，目前設置的是百分之四十寬，數值越大，柱狀條越粗
            label: {
              normal: {
                show: true,
                position: 'insideRight',
                color: ['#ffffff'],
                formatter: '{c}%'
              }
            },
            data: [13,45,54,34,43,54]
          }
        ]
      }
myChart .setOption(option)