S1. npm i echarts
webpack使用echarts:
https://www.echartsjs.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
S2.推荐使用ref挂载，echarts官方是用的id（两种方式都可以），vue中使用ref更加方面一些（要用的话就是this.$ref.chartDom），否则还要去设置id的值
S3.通过父组件传值options
注意：对象或数组默认值必须从工厂函数获取（基本类型和引用类型的区别）
S4. 更改data值，通过mounted设置计时器，beforeDestroy设置清除计数器
数据结构如下：
找到数据，并且一次遍历数组data的值，进行修改
父组件值发生变化，手动更新值，子组件监听options的值发生变化，然后去重新setOption，重新渲染echarts。（这是一种方法）；
或者父组件不去手动更新值，子组件通过深拷贝的方法也可以进行处理（见注释掉的代码）
一定要记得清除计数器！！！
遇到两个问题：
1、echarts在渲染时，DOM还没有完成加载好就开始渲染了，导致echarts样式有些问题。根据之前的经验，可以通过nextTick来实现。
但在这边学习到的是，可以通过npm i resize-detector,这里面封装了两个函数
分别在DOM加载好之后再进行方法的调用
2、性能问题，如果不加入防抖的话，就是resize方法会被调用多次。而加入防抖，可以只调用一次
网友评论