Vue-Echarts实现雷达图

效果：

image.png

安装依赖

npm i echarts --save

引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

应用

<div id="radar_canvas" class="echart" style="width: 300px;height: 240px;"></div>

methods: {
    initRadar() {
      let charts = this.$echarts.init(document.getElementById('leiDaTu'));
      var option = {
        title: {
          text: "智能评价",
          textAlign: 'left',
        },
        calculable: true,
        radar: {
          splitNumber: 4,
          shape: 'circle',
          name: {
            formatter: [`{a|${this.type}}`,
              '{b|{value}}'].join('\n'),
            rich: {
              a: {
                color: 'rgba(5, 193, 174, 1)',
                align: 'middle'
              },
              b: {
                color: '#333'
              },
            }
          },
          axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#ededed',
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: 'solid',
              // 坐标轴线线的类型。
            }
          },
          center: ['50%', '50%'],
          radius: '50%',
          startAngle: 90,
          indicator: [{
            name: '词汇词组',
            max: 100
          },
          {
            name: '语法句子',
            max: 100
          },
          {
            name: '内容立意',
            max: 100
          },
          {
            name: '篇章结构',
            max: 100
          }],
          splitArea: {
            show: false
          },
          // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
          splitLine: {
            lineStyle: {
              color: '#ededed', // 设置网格的颜色
            },
          },
        },
        series: [{
          type: 'radar',
          symbol: "none",
          lineStyle: {
            color: 'rgba(5, 193, 174, .1)'
          },
          areaStyle: {
            color: 'rgba(5, 193, 174, 1)' // 选择区域颜色
          },
          data: [{
            value: [70, 80, 90, 85]
          }]
        }]
      }
      charts.setOption(option);
    }
  },
  created() {
    this.$nextTick(function () {
      this.initRadar('radar_canvas')
    })
  }