echarts的series中富文本渲染不生效

1. echarts版本需要在3.7.1以上
2. 渲染当时svg方式，series中富文本集rich不生效，将svg更改为canvas

let myChart = this.$echarts.init(document.getElementById(chartId), null, {renderer: 'canvas'})
myChart.setOption(option,true)

3. 案例补充

 let option = {
        title: {
          text: '模式',
          left: 'center',
          top: '50%',
          // padding: [24, 0],
          textStyle: {
            color: '#fff',
            fontSize: 18,
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // legend: {
          // selectedMode: false,
          // formatter: function(name) {
          //   var total = 0; //各科正确率总和
            // echartData.forEach(function(value, index, array) {
              //total += value.value;
              // total = array.length;
            // });
            // return '共计{total|' + total + '}家单位';
          // },
          // data: ['我我我'],
          // left: 'center',
          // top: 'center',
          // icon: 'none',
          // align: 'center',
          // textStyle: {
          //   color: "#fff",
          //   fontSize: 16,
            // rich: {
            //   total: {
            //     color: "#ffc72b",
            //     fontSize: 40,
            //     align: 'center'
            //   }
            // }
          // },
        // },
        series: [{
          name: '模式',
          type: 'pie',
          radius: ['40%', '55%'],//同心圆
          center: ['40%', '70%'],//位置
          hoverAnimation: false,//悬停放大动画关闭
          itemStyle: {
            normal: {
              label: {
                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                // formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                // formatter: function (params) {
                //   return `{c}`;
                // },
                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                // formatter: '{a|{a}}\n {hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                formatter: '{per| {d}%}',
                // formatter: function (params) {
                //     return `<div class="zuo2-br-pie">{d}</div>`;
                //   },
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    // padding: [2, 4],
                    borderRadius: 2
                  }
                },
              },
              labelLine: {
                show: true,
                length:0,//第一段长度
                length2:0//第二段长度 设置0不显示第二段
              },
            },
          },

          data: [{
            name: '归属地',
            value: 30
          },{
            name: '上海',
            value: 20
          },{
            name: '号码',
            value: 30
          },{
            name: '身份',
            value: 40
          },{
            name: '关键词',
            value: 30
          },{
            name: '话题',
            value: 30
          }]
        }]
      };