【知识分享】Echarts雷达图组件封装

封装 Echarts 的雷达图（radar chart）组件也可以让你在 Vue 项目中更方便地使用雷达图。以下是封装 Echarts 雷达图组件的思路和示例代码：

（1）继续沿用之前安装的 Echarts 和 Vue-Echarts 插件。

（2）创建一个 RadarChart.vue 组件用于封装雷达图：

<template>
  <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    indicator: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chart);
      
      const option = {
        radar: {
          indicator: this.indicator
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: this.data,
              name: 'Radar Chart'
            }
          ]
        }]
      };

      chart.setOption(option);
    }
  }
};
</script>

（3）在父组件中调用 RadarChart 组件并传入数据和指示器：

<template>
  <div>
    <radar-chart :data="chartData" :indicator="chartIndicator" />
  </div>
</template>

<script>
import RadarChart from './RadarChart.vue';

export default {
  components: {
    RadarChart
  },
  data() {
    return {
      chartData: [80, 90, 70, 85, 95], // 数据值
      chartIndicator: [ // 指示器
        { name: 'Indicator A', max: 100 },
        { name: 'Indicator B', max: 100 },
        { name: 'Indicator C', max: 100 },
        { name: 'Indicator D', max: 100 },
        { name: 'Indicator E', max: 100 }
      ]
    };
  }
};
</script>
在这个示例中，我们封装了一个 RadarChart 组件，接收两个 props：data 用于传入雷达图的数据值，indicator 用于传入雷达图的指示器。在 RadarChart 组件的 mounted 钩子中调用 renderChart 方法来渲染雷达图。父组件中通过引入 RadarChart 组件并传入数据和指示器来展示雷达图。