echartjs with Vue，子组件监听对象类型的 pro

echarts 使用

根据文档 可以快速上手
需要注意的地方有：

1. 画图的 div 需要设置高宽
2. 可获取 dom 的生命周期（mounted 后）

遇到的需求与解决

1. 在 Vue 触发点击事件，改变图表数据
   思路：触发事件后，直接改变图表的数据
   结果：失败，因为如果要 echart 实例感知图表数据的改变需要通过 echart 的 API：setOption()

2. Vue 监听复杂对象的变化
   setOption 的参数是一个对象（如图）
   

   optionData

通常会改变的部分是 option.series[0].data ，这不是基本数据类型，使用 watch 监听对象类型的数据变化时，需要变量指向的地址发生变化
常用 JSON、concat、slice、map、filter 等不影响原对象的方法

3. watch 的 deep 选项

// Vue 官网例子
watch: {
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
        handler: function (val, oldVal) { /* ... */ },
        deep: true
    },
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
    }

测试发现 deep 的作用有限，变量指向的地址没有改变时，就监听不到（也是由于同样的原因，很多方法都不能监听到）
使用 'option.series[0].data' 这样的监听方式也不行，这方法只能使用简单的 . 运算符

总结

1. 使子组件监听到父组件传来的对象的变化：
   父组件使用 JSON、concat、slice、map、filter 等不影响原对象的方法来修改要传给子组件的数据（目的是让变量指向一个新地址）
   举个例子：

   // test 是要从父组件传递给子组件的数据
   // 子组件通过 watch 监听 test
   
   // 父组件
   // this.test = [1,2,3,4]
   
   // 可行，地址改变了
   this.test = this.test.filter((item) => item < 3)
   
   // 不可行，地址没有改变，子组件监听不到
   this.test[0] = 12
   

2. react 画图 recharts