vue实现雷达图

使用 ECharts 实现雷达图

安装 ECharts 依赖

npm install echarts --save

引入 ECharts 并初始化雷达图

<template>
  <div ref="radarChart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initRadarChart();
  },
  methods: {
    initRadarChart() {
      const chartDom = this.$refs.radarChart;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: '能力雷达图'
        },
        radar: {
          indicator: [
            { name: '攻击', max: 100 },
            { name: '防御', max: 100 },
            { name: '生命', max: 100 },
            { name: '速度', max: 100 },
            { name: '暴击', max: 100 }
          ]
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [80, 60, 75, 90, 50],
              name: '角色A'
            },
            {
              value: [50, 70, 85, 60, 80],
              name: '角色B'
            }
          ]
        }]
      };

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

自定义雷达图样式

修改雷达图外观

radar: {
  shape: 'circle',
  splitNumber: 5,
  axisName: {
    color: '#333',
    fontSize: 14
  },
  splitArea: {
    areaStyle: {
      color: ['rgba(255, 255, 255, 0.5)']
    }
  },
  axisLine: {
    lineStyle: {
      color: 'rgba(0, 0, 0, 0.3)'
    }
  }
}

响应式处理

添加窗口大小变化监听

mounted() {
  this.initRadarChart();
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.myChart && this.myChart.resize();
  }
}

动态更新数据

通过 props 或 API 获取数据

props: {
  chartData: {
    type: Array,
    default: () => []
  }
},
watch: {
  chartData: {
    handler(newVal) {
      if (this.myChart) {
        const option = this.myChart.getOption();
        option.series[0].data = newVal;
        this.myChart.setOption(option);
      }
    },
    deep: true
  }
}

使用 Vue-ECharts 组件

安装 vue-echarts

npm install vue-echarts echarts --save

组件实现方式

<template>
  <v-chart :option="radarOption" autoresize />
</template>

<script>
import { use } from 'echarts/core';
import { RadarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';

use([
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer
]);

export default {
  components: {
    VChart
  },
  data() {
    return {
      radarOption: {
        // 同上配置
      }
    };
  }
};
</script>