ECharts雷达图的富文本标签实现

雷达图的标签和其他的ECharts图表不一样的是，它不是由xAxis、yAxis控制，它是通过radar来进行配置。雷达图的标签值写在radar.indicator中。

重点配置项

radar:{
    axisName:{// 如果低版本eharts的axisName设置不生效，用name属性即可
        formatter: (value) => {// 标签名，对应indicator中的name
            return '{percent' + value + '}'
        },
        rich: {
            percent: {
                color: '#00FCFF',
                align: 'left',
                fontSize: 22
            }
        },
        backgroundColor: {// 如果需要给标签设置背景图片，可以使用该属性配置文本块
            image: require('./css/images/bg.png')
        },
        padding:14
    }
}

完整代码

<template>
  <div id="app">
    <div class="chart-box" ref="chartBox"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "App",
  data() {
    return {
      indicator: [
        {
          name: "标签1",
          max: 100
        },
        {
          name: "标签2",
          max: 100
        },
        {
          name: "标签3",
          max: 100
        },
        {
          name: "标签4",
          max: 100
        },
        {
          name: "标签5",
          max: 100,
        }
      ]
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let chartInstance = echarts.init(this.$refs.chartBox);
      let option = {
        radar: {
          axisName: {
            // eharts低版本axisName设置不生效的话，用name属性即可
            formatter: value => {
              // 标签名，对应indicator中的name
              return "{percent|" + value + "}";
            },
            rich: {
              percent: {
                color: "#00FCFF",
                align: "left",
                fontSize: 22
              },
            },
            backgroundColor: {
              // 如果需要给标签设置背景图片，可以使用该属性配置文本块
              image: require("./css/images/bg.png")
            },
            padding: 14
          },
          center: ["50%", "50%"],
          radius: "50%",
          indicator: this.indicator
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: [100, 18, 76, 24, 60]
              }
            ]
          }
        ]
      };
      chartInstance.setOption(option);
    }
  }
};
</script>

<style>
.chart-box {
  width: 400px;
  height: 400px;
}
</style>

效果图

注

此demo使用版本：

{
    "echarts": "^5.0.0",
}