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+'}' + '\n' + '{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);