Echart雷达图实现 重点 1. Echart依赖于原生dom的渲染方式 初始化必须放在mounted钩子函数里面 2. 参数非常多 看文档写 渲染图

<template>
  <div>
    <!-- 准备一个节点 -->
    <div ref="echart" style="width:400px;height:300px;" />
  </div>
</template>

<script>
// 导入核心包
import * as echarts from 'echarts'
// 获取一个渲染图表的dom节点 -> vue如何获取dom元素？  ref + this.$refs.echart
// 把echart渲染到准备好的dom节点中  -> vue中如何保证一个dom已经可以使用？ 钩子函数？ mounted

// 让组件可以进行参数定制化？ 父传子传递参数 达到一个复用的目的 很多地方都有可能用到雷达图
// 设计为props 在实际开发的过程中 有很多很多的业务参数都有可能会被定制 只要是需要被定制的都可以进行props抽离

// 如果传入的参数 不断发生变化 如何让图表不断地使用最新的参数重新渲染？
// 思路：
// 1. 寻找一个可以进行更新图片的函数方法 setOption 2.watch一下props参数 一变化就更新图表
// 核心点：this共享数据  共享echart实例对象 共享了option参数

// vue data初始化的性能问题
// data中的数据只要放进去不管数据嵌套层次多深 都会进行递归响应式处理 data它的作用就是放置响应式数据的
// echart实例对象很大  options参数很多 而且这里的刷新图表是独立于vue响应式的存在 不需要响应式
// 如果非得放进去就是浪费  没有放进去 减少了很多不必要的响应式损耗

// mounted中往this上挂就没事儿呢  执行时机的问题 响应式处理是发生在data中 mounted执行的时候 响应式数据早就结束了
// 这个时候如果再往当前的组件实例上添加任何的属性或者方法都不会被处理为响应式
// 所里这里的this挂载既可以保证多个配置项中可以共享数据 并且还不存在响应式性能开销

export default {
  props: {
    indicator: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    indicator() {
      console.log('数据参数变化了')
      // 使用最新的参数刷新图表 这里要调用实例方法 但是实例在另外一个函数中生成 无法直接共享 怎么办？
      // data  实例放到外头  直接挂载到this上
      console.log(this.myChart)
      // 合并老参数和新参数进行修改操作
      this.myChart.setOption({
        ...this.option,
        radar: {
          // shape: 'circle',
          indicator: this.indicator
        }
      })
    }
  },
  mounted() {
    this.echartInit()
  },
  methods: {
    // 初始化
    echartInit() {
      this.myChart = echarts.init(this.$refs.echart)
      this.option = {
        radar: {
          // shape: 'circle',
          indicator: this.indicator
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      }
      // 把配置项数据渲染到我们已经准备好的图标实例中
      this.option && this.myChart.setOption(this.option)
    }
  }
}
</script>