第三章 实践项目4 在vue中使用echarts，antv等第三方库

1，首先npm install echarts
新建echarts文件夹
在vue中，获取dom元素的方法，使用ref，而不是官网原本的document.getElementById();这种方式

image.png

image.png

2，通过打断点可以知道，当echarts在插入时样式可能还没有加载完成，所以在插入echarts时会有布局问题，解决方式：
第一种：延迟echarts的加载，第二种方式添加监听echarts大小的变化
一般考虑第二种，怎么监听呢？
引入一个插件，首先npm install resize-detector

image.png

image.png

image.png

这个方法突然让我想到了上周的项目中，也有一个点击左侧的菜单栏进行收缩的栏目，这时需要监听改变，然后计算图片的高度和大小，但是自己考虑的思路和大神还是不一致的，自己并没有想到监听，而是只是在切换时进行计算，同时由于运行时间，有时还没加载完就运行完了，所以自己左侧导航是直接写的值，而不是获取的，刚开始自己还添加了setTimeout延迟处理，但是会有闪动的效果就给去掉了。

为了防止多次触发事件，使用了loadsh中的debounce

image.png

image.png

image.png

下一步：将echarts抽离为组件
高度和默认配置都要从父组件中传递过来

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

处理方法好灵活

image.png

其中random是使用loadsh中的random
使用深度监听的一个弊端就是非常耗性能，尤其是像echarts这样的图表

image.png

image.png

image.png

image.png

总结：1，vue中获取dom元素的方式ref定义，this.$refs.方式获取，2，监听，深度监听
3，生命周期的使用。其实这里生命周期的具体使用，可以在复习下。