Vue集成ECharts三种方式对比：原生封装/vue-echarts/v-charts实战

脚本专家

在Vue项目中集成ECharts图表，常见的有三种实现方式：原生引入ECharts并手动封装组件、使用官方封装vue-echarts、以及基于Vue2二次封装的v-charts。本文结合实际代码逐一解析其用法与适用场景。

<h2>方式一：原生引入ECharts，手动封装组件</h2>
该方式完全掌控ECharts实例，适合需要深度定制或使用ECharts高级功能（如WebGL、SVG渲染、自定义系列）的场景。

首先安装ECharts：

2. npm install echarts --save

复制代码

创建公共组件 EChart.vue，模板中放置一个容器div，ref指向chart，高度设为300px：

2. <template>
3.   <div :style="{width: '100%', height: '300px'}" ref="chart"></div>
4. </template>
5. <script>
6. import echarts from 'echarts'
7. export default {
8.   name: 'EChart',
9.   props: {
10.     option: { type: Object, required: true }
11.   },
12.   data() { return { chartInstance: null } },
13.   watch: {
14.     option: {
15.       handler(newOption) {
16.         if (this.chartInstance) {
17.           this.chartInstance.setOption(newOption);
18.         }
19.       },
20.       deep: true
21.     }
22.   },
23.   mounted() {
24.     this.chartInstance = echarts.init(this.$refs.chart);
25.     this.chartInstance.setOption(this.option);
26.   },
27.   beforeDestroy() {
28.     if (this.chartInstance) {
29.       this.chartInstance.dispose();
30.     }
31.   }
32. }
33. </script>

复制代码

父组件使用时只需引入EChart，传入option：

2. <template>
3.   <div>
4.     <e-chart :option="chartOption"></e-chart>
5.   </div>
6. </template>
7. <script>
8. import EChart from './EChart.vue'
9. export default {
10.   components: { EChart },
11.   data() {
12.     return {
13.       chartOption: {
14.         // ECharts 配置项
15.       }
16.     }
17.   }
18. }
19. </script>

复制代码

此封装通过props接收option，在mounted中初始化，watch深度监听option变化并调用setOption更新图表，beforeDestroy时销毁实例释放内存。组件可复用，且内部处理了生命周期，适合中大型项目中对图表细节有严格控制的场景。

<h2>方式二：使用vue-echarts</h2>
vue-echarts（https://github.com/ecomfe/vue-echarts）是基于ECharts v4.1.0+和Vue.js v2.2.6+的官方封装组件，将ECharts实例作为Vue组件直接使用，免去手动获取DOM、挂载实例的步骤，且完整保留了ECharts所有功能。

安装：

2. npm install echarts vue-echart

复制代码

在main.js中全局注册：

2. import ECharts from 'vue-echarts'
3. Vue.component('vChart', ECharts)

复制代码

使用时直接在模板插入vChart组件，通过options属性传入配置：

2. <template>
3.   <div class="page">
4.     <el-card>
5.       <vChart class="chart3" :options="barOptions" />
6.     </el-card>
7.   </div>
8. </template>
9. <script>
10. export default {
11.   data() {
12.     return {
13.       barOptions: {
14.         color: ["#5094FF", "#64DAAC", "#FAC84A"],
15.         grid: { top: "15%", bottom: "20%", right: "5%", left: "5%" },
16.         tooltip: {},
17.         legend: { data: ["合格数", "超标数", "合格率", "超标率"], top: "0" },
18.         xAxis: {
19.           type: "category",
20.           data: ["04-13", "04-14", "04-15", "04-16", "04-17", "04-18", "04-19"]
21.         },
22.         yAxis: { type: "value" },
23.         series: [
24.           { name: "合格数", type: "bar", barWidth: "15%", barGap: "5%", data: [20, 232, 441, 654, 770, 530, 410] },
25.           { name: "超标数", type: "bar", barWidth: "15%", data: [120, 482, 791, 834, 590, 930, 710] },
26.           { name: "合格率", type: "line", data: [420, 332, 291, 654, 590, 330, 810] },
27.           { name: "超标率", type: "line", data: [120, 232, 391, 854, 590, 730, 410] }
28.         ]
29.       }
30.     };
31.   }
32. };
33. </script>

复制代码

vue-echarts通过v-bind:options即可驱动图表更新，内部自动处理resize和销毁。该方式适合需要频繁切换配置或同时使用多个不同图表的页面，开发效率较高。

<h2>方式三：使用v-charts</h2>
v-charts（https://v-charts.js.org/#/）是基于Vue2二次封装的图表组件库，专注于数据驱动，配置更为简洁。虽然功能不如ECharts完整，但足以覆盖常见的折线图、柱状图、饼图等。

以官网示例为例，展示柱状图与折线图混合：

2. <template>
3.   <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
4. </template>
5. <script>
6. export default {
7.   data () {
8.     this.chartSettings = { showLine: ['下单用户'] }
9.     return {
10.       chartData: {
11.         columns: ['日期', '访问用户', '下单用户', '下单率'],
12.         rows: [
13.           { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
14.           { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
15.           { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
16.           { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
17.           { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
18.           { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
19.         ]
20.       }
21.     }
22.   }
23. }
24. </script>

复制代码

ve-histogram组件接收data和settings，settings中的showLine数组指定哪些指标以折线显示。相比vue-echarts，v-charts直接将表格数据转化为图表，更贴近“数据可视化”的直觉，尤其适合后台管理系统中大量的简单图表展示。

<h2>总结与选型建议</h2>
- 原生封装：灵活度最高，适合需要调用ECharts高级API、自定义渲染器或进行性能优化的复杂项目。
- vue-echarts：官方组件，与Vue生态结合紧密，使用简单，适合大多数通用图表需求。
- v-charts：数据驱动，代码量最少，适合数据格式固定、图表维度较少的后台面板。

根据项目对图表定制程度和数据量的要求，选择最适合的方案即可。

热心网友1

感谢楼主的详细分享！三种方式的对比很清晰，特别是原生封装的方式，既给出了完整的组件代码案例，也指出了它适合深度定制和高级功能的场景，对需要精细化控制图表的项目很有参考价值。vue-echarts 的用法也简洁明了，省去了手动管理 DOM 和实例的步骤，开发效率更高。期待后续关于 v-charts 的部分能继续补全，方便大家对比三者的优劣势和适用场景。