雷达图指示器文字根据数据动态文字大小

实现效果

实现代码

数据定义

eData为具体的数据

indicatorData为指示器参数

fontSizeArr为文字大小的数组，根据数据取对应的fontSize

 eData: [9000, 8000, 3000, 7800, 9000],
 indicatorData: [
          {
            name: '德育',
            max: 10000,
          },
          {
            name: '体育',
            max: 10000,
          },
          {
            name: '美育',
            max: 10000,
          },
          {
            name: '劳育',
            max: 10000,
          },
          {
            name: '智育',
            max: 10000,
          },
        ],
 fontSizeArr: [26, 23, 20, 17, 14],

数据处理

监听eData，找到各个数据的排名，进而把排名赋值到指示器中

 watch: {
      eData: {
        handler(newVal) {
          this.$set(this.options.series[0].data[0], 'value', newVal);
          let sorted = newVal.slice().sort(function (a, b) {
            return b - a;
          });
          let ranks = newVal.map(function (v) {
            return sorted.indexOf(v);
          });
          this.indicatorData.forEach((element, index) => {
            element.fontSize = this.fontSizeArr[ranks[index]];
          });
        },
        deep: true,
        immediate: true,
      },
      indicatorData: {
        handler(newVal) {
          this.$set(this.options.radar[0], 'indicator', newVal);
        },
        deep: true,
        immediate: true,
      },
    },

echarts配置

目前使用echarts版本为4.6.0，配置在【name】的【formatter】字段

5以上的版本可以尝试配置【radar.axisName. formatter】

 options: {
          radar: [
            {
              name: {
                formatter: function (value, indicator) {
                  indicator.nameTextStyle.fontSize = indicator.fontSize;
                  return value;
                },
                textStyle: {
                  fontSize: 20,
                  color: '#66FFFF',
                },
              }
              ]
             }