vue3 echarts（建议收藏）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，数据可视化已成为不可或缺的技能。Vue 3 作为前端框架的佼佼者，结合 ECharts 这一强大的图表库，能够帮助开发者高效地构建交互式可视化应用。本文将从零开始，以通俗易懂的方式讲解如何在 Vue 3 项目中集成和使用 ECharts，涵盖基础图表构建、动态数据交互、性能优化等核心知识点。无论是编程新手还是有一定经验的开发者，都能通过本文快速掌握这一组合的实战能力。

一、Vue 3 与 ECharts 的协同工作原理

1.1 技术背景与优势

Vue 3 的响应式系统和组件化特性，与 ECharts 的图形渲染能力形成完美互补。可以将 Vue 3 比作一位经验丰富的厨师，而 ECharts 则是精心准备的食材——Vue 3 负责“烹饪”（数据绑定、组件管理），ECharts 负责“呈现”（图形绘制、交互逻辑）。两者结合后，开发者只需关注业务逻辑，无需深入底层实现细节。

1.2 核心概念对比

二、环境搭建与基础配置

2.1 项目初始化

首先通过 Vue CLI 创建项目：

vue create my-chart-app  
cd my-chart-app  
npm install echarts @vue/runtime-dom  

这里需要特别注意 @vue/runtime-dom 的安装，它为 ECharts 提供了 DOM 操作支持。

2.2 创建基础图表组件

在 src/components 目录下新建 BaseChart.vue，通过 ref 获取 DOM 元素并初始化图表：

<template>  
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>  
</template>  

<script setup>  
import * as echarts from 'echarts';  
import { ref, onMounted } from 'vue';  

const chartContainer = ref(null);  

onMounted(() => {  
  const chart = echarts.init(chartContainer.value);  
  const option = {  
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },  
    yAxis: { type: 'value' },  
    series: [{  
      data: [120, 200, 150],  
      type: 'line'  
    }]  
  };  
  chart.setOption(option);  
});  
</script>  

这段代码通过 onMounted 生命周期钩子，在 DOM 加载完成后初始化图表。开发者可以像普通组件一样在父组件中引入 <BaseChart />。

三、常见图表类型实战

3.1 柱状图与折线图对比

3.1.1 柱状图实现

<script setup>  
const barOption = {  
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },  
  yAxis: {},  
  series: [{  
    type: 'bar',  
    data: [50, 100, 70],  
    itemStyle: { color: '#5470C6' } // 设置柱子颜色  
  }]  
};  
</script>  

3.1.2 折线图实现

<script setup>  
const lineOption = {  
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3'] },  
  yAxis: {},  
  series: [{  
    type: 'line',  
    data: [25, 60, 40],  
    lineStyle: { width: 3 }, // 设置折线粗细  
    symbolSize: 8 // 设置节点大小  
  }]  
};  
</script>  

关键差异点：

• 柱状图通过 bar 类型展示离散数据对比
• 折线图通过 line 类型展示连续数据趋势
• 两者均支持 itemStyle 和 lineStyle 自定义样式

四、动态数据与交互增强

4.1 响应式数据绑定

通过 Vue 3 的 ref 或 reactive 实现动态数据更新：

<script setup>  
import { ref } from 'vue';  

const chartData = ref([10, 20, 30]);  
const chart = ref(null);  

// 更新数据的方法  
const updateData = (newData) => {  
  chartData.value = newData;  
  chart.value.setOption({  
    series: [{ data: chartData.value }]  
  });  
};  
</script>  

比喻说明：

这就像给图表装上“自动更新”开关——当数据源（如用户输入、API 返回）发生变化时，只需“转动”开关，图表就会像镜子一样映射出新的数据形态。

4.2 图表交互事件

监听点击、悬停等事件实现交互功能：

chart.on('click', (params) => {  
  alert(`您点击了 ${params.name}，值为 ${params.value}`);  
});  

通过 params 对象可获取点击的坐标、系列类型等信息，适合开发数据筛选、钻取等功能。

五、性能优化与进阶技巧

5.1 图表自适应与缩放

在容器尺寸变化时自动调整图表：

window.addEventListener('resize', () => {  
  chart.value.resize();  
});  

最佳实践：将此逻辑封装到 onMounted 和 onUnmounted 中，避免内存泄漏。

5.2 复杂图表组合

通过 grid 和 yAxis 设置实现多系列图表：

const complexOption = {  
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },  
  yAxis: [  
    { type: 'value', name: '销售额' },  
    { type: 'value', name: '访问量', position: 'right' }  
  ],  
  series: [  
    { name: '销售额', type: 'bar', yAxisIndex: 0 },  
    { name: '访问量', type: 'line', yAxisIndex: 1 }  
  ]  
};  

原理比喻：

这就像在画布上搭建“双层轨道”——通过不同的 yAxisIndex，让柱状图和折线图在各自的“轨道”上运行，互不干扰又共同服务于数据表达。

六、实际案例：销售数据看板

6.1 需求分析

构建包含以下元素的销售数据看板：

• 月度销售额柱状图
• 季度增长率折线图
• 产品分类占比饼图

6.2 组件化实现

6.2.1 柱状图组件

<script setup>  
defineProps({  
  salesData: { type: Array, required: true }  
});  

const barOption = {  
  xAxis: { data: ['Jan', 'Feb', 'Mar'] },  
  yAxis: {},  
  series: [{  
    type: 'bar',  
    data: props.salesData,  
    barWidth: '40%'  
  }]  
};  
</script>  

6.2.2 饼图组件

<script setup>  
defineProps({  
  productData: { type: Array, required: true }  
});  

const pieOption = {  
  series: [{  
    type: 'pie',  
    radius: '50%',  
    data: props.productData,  
    label: {  
      show: true,  
      formatter: '{b}: {d}%' // 显示百分比  
    }  
  }]  
};  
</script>  

6.3 父组件集成

<template>  
  <div class="dashboard">  
    <BarChart :sales-data="[120, 150, 80]" />  
    <PieChart :product-data="[{name: 'A', value: 40}, {name: 'B', value: 60}]" />  
  </div>  
</template>  

通过 props 传递数据，实现高内聚、低耦合的组件设计。

七、常见问题与解决方案

7.1 图表不显示的排查步骤

1. 检查 DOM 容器尺寸：确保 div 具备明确的 width 和 height
2. 确认数据格式：数据需为数字类型，避免 null 或空数组
3. 调试日志输出：在 onMounted 中添加 console.log(chart) 检查初始化状态

7.2 图表性能优化

• 懒加载：对大型图表使用 v-intersection观察 触发加载
• 数据降采样：对高密度时间序列数据使用 ecStat.max 等工具简化数据
• Web Worker：通过 echarts-gl 将复杂计算移至后台线程

八、未来展望与学习资源

随着 Vue 3 的 Composition API 日趋成熟，开发者可以更灵活地将 ECharts 与 Vue 的响应式系统结合。建议读者：

1. 深入阅读 Vue 3 官方文档 的响应式系统章节
2. 探索 ECharts 的 高级配置文档
3. 参与开源项目实践，例如 Vue-ECharts-Starter

通过本文的讲解，您已掌握了从基础配置到复杂图表实现的完整流程。当面对真实业务场景时，只需将本文的示例代码与业务逻辑结合，即可快速构建出专业级的数据可视化应用。记住，持续实践是掌握技术的最佳路径——现在就动手尝试您的第一个 Vue 3 ECharts 项目吧！