关于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时用了柱状图来写,懒得改了,就一路写到底,我的项目里面的老代码是死数据,不涉及到数据变化,但是实际上线肯定是要变化的,请求后台来获得。所以先把这个组件封装一下。
参数外部传入的写法,可以改样式和数据
下部还有数据修改后动态渲染的代码