在Vue3中优雅的使用echart图表

前言

在大屏可视化项目中，我们常常需要用到很多的图表组件，通常你会编写很多的对图表进行渲染，以及引入它们所需的一些组件并使用。

在中我们常常把可复用的组件单独抽离出来，再通过、等方法向复用组件中传入组件所需数据，而在中我们可以将一些逻辑功能写成hook进行抽离和复用再传入到视图中，这会不仅让你的组件中的代码更加优雅而且阅读性更强。

封装思路

引入模块

我们先创建文件，用于将图表中所需要用到组件全部引入进来并导出。

由于引入的模块过多，所以我们把它引入的模块的代码抽离出来，增加代码的可阅读性

封装功能

在同级目录下创建一个文件，这是我们复用图表文件。

封装功能如下：

监听图表元素变化及视图，自动重新渲染图表适应高度

可传入主题、渲染模式（、）

效果

有了以上封装好之后的代码，我们在组件中使用图表库时将会更加简单而高效。

使用例子

npm

npm install echart @qc2168/use-charts