本文介绍如何在Vue中封装ECharts组件，包括接收父组件传入的id、time、opData、unit、title等参数，以及处理样式和数据动态渲染。在组件生命周期中，初始化ECharts实例应在mounted钩子中执行，并通过watch监听数据变化来更新图表。此外，还讨论了ECharts图表的自适应策略，即监听窗口resize事件调用resize方法，并在组件销毁前移除事件监听。文中提供了代码示例和效果展示。
关于echarts封装成组件，要注意父组件传入子组件的数据有哪些，一般是
id: 图表实例化需要一个唯一的id；
time： x轴的显示数据，参数名可以自己定义；
opData： 用来配置series的系列列表，参数可以自己定义；
unit： y轴单位显示，参数可以自己定义；
title： 图表系列标记，参数可以自己定义；
要注意 样式有的时候也是需要传入的，比如饼图的颜色或者折线图的线的颜色，点的颜色，在复用的时候，大多是要重写进去的，用来区分不一样的图
（画布的width和height也可以传入，这个代码是充满外层div的，所以他没有传入）
传进来之后放在props里面，直接用this上到你的初始化echarts代码里，注意echarts的init放在methods里面定义好之后要把它放在mounted里面执行，然后你要写一个watch，用来监听你的数据，每次数据更新后，执行init更新你的echarts表。
下面图片是下面链接的代码，堪称千年老代码。
echarts做图标自适应就是说，将浏览器窗口的resize事件做个回调函数，调用echarts.resize（）这里要注意，最后要记得销毁一下这个事件，将window.removeEventListion放在destoryed（）{}里面，在组件销毁之前做这件事，注意下面的代码这里拼错了。看看结构就好了。思路还是很好的。
存一下
这里是我写的代码，是全局注册的echarts，当然，也可以使用局部注册echarts，项目里面尽量使用局部注册，请不要吐槽为什么是个柱状图而不是pie，我本来是要用pie，但是呢，引入echarts时用了柱状图来写，懒得改了，就一路写到底，我的项目里面的老代码是死数据，不涉及到数据变化，但是实际上线肯定是要变化的，请求后台来获得。所以先把这个组件封装一下。
参数外部传入的写法，可以改样式和数据
下部还有数据修改后动态渲染的代码
最低0.47元/天 解锁文章
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
