Vue项目集成ECharts图表：从安装到组件封装的完整实践

脚本专家

在Vue前端项目中，ECharts是常用的数据可视化库。本文基于实际开发经验，详细介绍如何在Vue中集成ECharts并封装可复用的图表组件，包括安装、组件设计、数据传递及屏幕自适应处理。

一、准备工作：安装ECharts

首先通过npm或cnpm安装ECharts依赖。如果npm速度慢，可先配置淘宝镜像。

2. // 使用npm
3. npm install echarts --save
5. // 或使用cnpm（推荐）
6. npm install -g cnpm --registry=https://registry.npm.taobao.org
7. cnpm install echarts -S

复制代码

注意版本差异：ECharts 4.x版本安装包自带地图JSON文件，可直接引用；5.x版本去除了地图数据，需要从官网下载对应的JSON文件放入项目手动引入。本文以常规折线图为例，不涉及地图，后续可单独探讨地图引入。

二、封装可复用的图表组件

推荐将ECharts实例封装成独立组件（如chartLine.vue），便于在多个页面中重复使用。组件模板中仅放置一个用于挂载图表的div，样式设置为宽高100%以自适应父容器。

2. <template>
3.   <div id="echart-line" :style="{width: '100%', height: '100%'}"></div>
4. </template>

复制代码

组件脚本部分引入ECharts，并编写initChart方法，接收图表名称、X轴数据和Y轴数据。使用echarts.init初始化实例，配置option后调用setChart。同时添加window.resize事件监听，实现图表自适应。

2. <script>
3. import echarts from "echarts";
4. export default {
5.   methods: {
6.     initChart(name, xData, yData) {
7.       let chart = echarts.init(document.getElementById('echart-line'));
8.       var option = {
9.         tooltip: {
10.           trigger: 'axis'
11.         },
12.         legend: {
13.           data: [name],
14.           bottom: '0%'
15.         },
16.         grid: {
17.           top: '10%',
18.           left: '3%',
19.           right: '8%',
20.           bottom: '11%',
21.           containLabel: true
22.         },
23.         xAxis: {
24.           type: 'category',
25.           boundaryGap: false,
26.           data: xData
27.         },
28.         yAxis: {
29.           type: 'value'
30.         },
31.         series: [{
32.           name: name,
33.           type: 'line',
34.           stack: '总量',
35.           data: yData
36.         }]
37.       };
38.       chart.setOption(option);
39.       // 屏幕尺寸变化时自适应
40.       window.addEventListener("resize", () => {
41.         chart.resize();
42.       });
43.     }
44.   }
45. }
46. </script>

复制代码

三、在页面中引用图表组件

在需要使用图表的页面中导入该组件，并在模板中使用。通过data定义图表所需的名称、X轴数据和Y轴数据，然后在mounted生命周期中通过$refs调用子组件的initChart方法传递数据。

2. <template>
3.   <div class="analysisTask">
4.     <ChartLine ref="chart_line_one"/>
5.   </div>
6. </template>
8. <script>
9. import ChartLine from './partChart/chartLine.vue';
10. export default {
11.   data() {
12.     return {
13.       name: '张雪',
14.       xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
15.       yData: [30, 132, 80, 134]
16.     };
17.   },
18.   mounted() {
19.     const {name, xData, yData} = this;
20.     this.$refs.chart_line_one.initChart(name, xData, yData);
21.   },
22.   components: {
23.     ChartLine
24.   }
25. }
26. </script>

复制代码

四、常见注意事项

- 确保在mounted后再调用initChart（此时DOM已渲染完毕），否则无法获取元素。
- 如果图表在切换页面或隐藏显示时出现变形，可考虑在组件的activated生命周期中手动调用resize或重新初始化。
- 多图表并存时，每个图表的挂载div的id必须唯一，避免冲突。

五、总结

以上方法适用于Vue2项目（Vue3类似，仅组件注册方式略不同），通过封装组件实现了ECharts图表的模块化和复用。开发者可根据业务需求扩展其他图表类型（柱状图、饼图等），只需在initChart中修改series配置即可。对于地图图表，需额外处理数据源，后续可单独撰文详解。

热心网友7

感谢楼主分享这么详细的实践总结！封装成组件确实能大幅提高复用性，而且你在注意事项里提到的挂载时机和id唯一性，都是新手容易踩坑的地方。 有个小建议：在`window.addEventListener('resize', ...)`里最好在组件销毁时移除监听，否则可能导致内存泄漏或重复绑定。可以配合`beforeDestroy`或`unmounted`做清理。另外如果项目里图表较多，可以考虑用`echarts.init`时传一个`theme`参数，方便统一风格。 地图引入那部分很感兴趣，期待后续的单独讲解！