vue echarts雷达图

问题：页面需要一张图表表示数据
解决：
下载echarts文件

//使用的页面引入文件

import echarts from "../../../static/js/echarts.min.js";

template

<div id="main" style="width: 300px; height: 300px"></div>

script

data(){
  value: ["0.0", "0.0", "0.0", "0.0", "0.0"],
  indicator: [
        { name: "师资力量", max: 5 },
        { name: "环境设施", max: 5 },
        { name: "课程质量", max: 5 },
        { name: "喜爱程度", max: 5 },
        { name: "性价比", max: 5 },
      ]
}

mouted

mouted(){
 this.$nextTick(() => {
      this.drawPie("main");
    });
}

methods

methods:{
   drawPie() {
      var charts = echarts.init(document.getElementById("main"));
      var option = {
        rotation: "90",

        color: "#ff6700",
        splitLine: {
          lineStyle: {
            color: "#333",
          },
        },
        radar: {
          center: ["60%", "50%"],
          radius: ["0%", "42%"],
          name: {
            textStyle: {
              color: "#333",
              padding: [3, 5],
            },
          },
          indicator: this.indicator,
        },
        series: [
          {
            name: "学生评价",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: this.value,
                name: "学生评价",
              },
            ],
          },
        ],
      };
      charts.setOption(option);
    },
}

//使用时直接引入，具体数据修改data内容；
//如果安装了echarts依赖，可直接引入，不用再引入echarts文件，否则可能发生冲突。