前言
在大屏可视化项目中,我们常常需要用到很多的图表组件,通常你会编写很多的对图表进行渲染,以及引入它们所需的一些组件并使用。
在中我们常常把可复用的组件单独抽离出来,再通过、等方法向复用组件中传入组件所需数据,而在中我们可以将一些逻辑功能写成hook进行抽离和复用再传入到视图中,这会不仅让你的组件中的代码更加优雅而且阅读性更强。
封装思路
引入模块
我们先创建文件,用于将图表中所需要用到组件全部引入进来并导出。
由于引入的模块过多,所以我们把它引入的模块的代码抽离出来,增加代码的可阅读性
封装功能
在同级目录下创建一个文件,这是我们复用图表文件。
封装功能如下:
监听图表元素变化及视图,自动重新渲染图表适应高度
可传入主题、渲染模式(、)
效果
有了以上封装好之后的代码,我们在组件中使用图表库时将会更加简单而高效。
使用例子
npm
npm install echart @qc2168/use-charts
领取专属 10元无门槛券
私享最新 技术干货