Echartのレーダー図(Radar)リッチテキスト使用ノート

まず、私がechart公式サイトで使っているカスタムパッケージをダウンロードしました.ダウンロードしたのはレーダー図に関するjsファイルだけです.
インポート:

レーダー の :

option: {
        title : {

        },
        tooltip : {

        },
        legend: {

        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        radar:
          {
            name: {
              formatter:(params)=>{
                //   formatter          ，        `{|}`        
                console.log(params);
                let a = params.split(',')[0];
                let b = params.split(',')[1];
                return '{top|'+a+'}' + '
' + '{end|'+b+'}'
              },
              //        
              rich:{
                //         
                top: {
                  color: '#525353',
                  fontFamily: 'Microsoft YaHei',
                  fontSize: 13,
                  fontWeight: 600,
                  align: 'center',
                },
                //        
                end:{
                  color: '#FF626C',
                  fontFamily: 'Microsoft YaHei',
                  fonSize: 24,
                  fontWeight: 600,
                  align: 'center',
                }
              }
            },
            indicator : [
              { text: '  ,60%', max: 6000},
              { text: '  ,70%', max: 16000},
              { text: '  ,80%', max: 30000},
              { text: '  ,90%', max: 38000},
              { text: '   ,30%', max: 52000},
            ],
            splitArea : {
              show : true,
              areaStyle : {
                color: ['#FF6B75','#FF9198', '#FFB1B6', '#FFD3D6', '#FFEFF0']
                //          
              }
            },
            splitLine : {
              show : true,
              lineStyle : {
                width : 1,
                color : []
                //           
              }
            }
          }
        ,
        calculable : true,
        series : [
          {
            name: '   vs   （Budget vs spending）',
            type: 'radar',
            data : [
              {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '    （Allocated Budget）',
                symbol: 'circle', //      ，     'rect','angle' 
                symbolSize: 8, //      
                symbolBorderColor: '#FF7D36',
                lineStyle: {
                  color: '#FF5A00'
                }
              },
            ]
          }
        ]
      }

レンダリング:

var radarEchart = echarts.init(this.$refs.echart);
        //                 。
radarEchart.setOption(this.option);