vue中如何使用ECharts画图并实现自适应

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

在 vue 项目的 main.js 文件中全局全部引入：

以上引入方式是将 ECharts 中所有的图表和组件全部引入，这会导致打包时文件过大，所以我们也可以根据实际需要在需要画图的 .vue 文件中按需引入：

在页面标签中新建一个 id（必需）为 main 的固定宽高的 div

在 methods 写好画图的方法，该方法包含一些图表的配置信息

在 mounted 中调用该方法进行画图

页面效果如图

以上就是 vue 中使用 ECharts 画图的基本方法，具体也可参考官方。

但是光基本的使用方法，往往无法满足项目的需求，一般在项目中我们需要实现图表的自适应或者多图，嵌套画图，实时数据画图，循环画图等等。下面我们先来研究如何实现图表的自适应。

将图表容器的宽高设置为百分比的形式，完整代码如下：

页面渲染存在以下问题：

1）初次渲染时，图表高度不是按设置的100%来显示，如图：

2）需要手动点一下浏览器的刷新后才正常显示，如图：

3）图表没有随着浏览器窗口的大小而自适应显示，如图：

方法一、使用 window.onresize（官方）

基于前提中的代码，更改 initChart 方法的代码如下：

存在的问题：

1）初次渲染时，图表高度仍然不是按设置的100%来显示，如图：

2）仍然需要手动刷新一次后才正常显示，如图：

2）多个图表的时候就只有最后一个自适应生效了，onresize会被覆盖，如图：

方法二、使用 window.addEventListener 添加 resize 方法

基于前提中的代码，更改 initChart 方法的代码如下：

存在的问题：

1）初次渲染时，图表高度仍然不是按设置的100%来显示，如图：

2）仍然需要手动刷新一次后才正常显示，如图：

3）虽然基本实现了图表的自适应，但是当 vue 页面路由跳转到下一个页面时，上一个页面的 onresize 方法仍会继续执行。

方法三、通过封装自适应方法 esresize 实现

参考：blog.csdn.net/qq_31967985…

esresize.js 如下：

vue 文件中引入 esresize.js

使用：基于前提中的代码，更改 initChart 方法的代码如下：

使用该方法以上所有存在的问题都被解决了。

对于将图表容器宽高设置成百分比而造成的初次渲染时图表容器高度不生效的问题（以上方法一和方法二的问题1），还可以通过监听浏览器窗口变化动态设置图表容器大小为 window.innerWidth 和 window.innerHeight 来解决，可以搭配自适应来一起使用，只不过这样比较繁琐，不推荐使用，但是也可以参考一下实现方式。

具体代码如下：

初次渲染时页面完好，如图：

以上内容只是针对在 div 中画图时存在的一些问题和解决办法，貌似在 Tabs 标签页中画图又会出现别的问题，继续研究，感谢各位大佬！