Vue使用echarts绘制雷达图

效果图：

vue要绘制三维折线图首先要引入 "echarts":

npm install echarts@4.1.0 --save

具体代码如下：

<template>
  <div id="main" style="height:500px;width: 100%;" ref="main"></div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  data() {
    return { }
  },
  mounted() { this.drawLine() },
  methods: {
    drawLine() {
      const myChart = echarts.init(this.$refs.main); 
      let figureData = [
        { name: xxx, max: xxx, },
        // ...以此类推
      ]
      let data = [
        { name: xxx, value: [...], }
        // ...以此类推
      ]
      let dataName = [...data.name]

      let option = {
        legend: { data: dataName, }, // 数据名
        tooltip: { // 设置展示雷达图详细参数
          show: true,
          trigger: 'item',
        },
        radar: { indicator: figureData, }, // 雷达图参数
        series: [
          {
            type: 'radar',
            label: { show: false, }, // 是否显示值
            areaStyle: {}, // 阴影
            animationDuration: 3000, // 动画时间
            data: data,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

注：直接复制这串代码是无法运行的，需要自己补充 figureData data dataName 三个参数，参数格式按示例填写即可