摘要
ECharts 是一个强大的数据可视化库，广泛应用于各种业务系统。本文将从 数据源获取、数据处理 到 动态展示 详细介绍如何利用 ECharts 构建直观的可视化图表。
# 一、为什么要用 ECharts 进行数据可视化？
在现代业务系统中，数据是关键，但仅靠一堆表格和数字很难让人直观理解。因此，数据可视化 变得越来越重要。
ECharts 作为百度开源的可视化库，拥有以下优势：
✅ 免费开源：可以自由使用，不受商业限制。
✅ 图表丰富：支持折线图、柱状图、饼图、地图等多种图表类型。
✅ 交互性强：支持缩放、点击、拖拽等用户交互功能。
✅ 性能强大：基于 Canvas，支持数百万数据点的高效渲染。
案例：销售数据可视化
假设我们有一组销售数据，希望将其展示成折线图，以直观了解销售趋势。如果只是用表格，可能是这样：
| 日期 | 销售额（万元） |
|---|---|
| 2024-05-01 | 15 |
| 2024-05-02 | 22 |
| 2024-05-03 | 19 |
| 2024-05-04 | 30 |
| 2024-05-05 | 25 |
但如果用 ECharts 生成折线图，就能一眼看出数据走势：
# 二、数据可视化的完整流程
在业务系统中，通常可视化数据的流程如下：
1️⃣ 获取数据 → 2️⃣ 处理数据 → 3️⃣ 渲染图表 → 4️⃣ 动态更新
# 三、数据获取：从接口拿到数据
在真实业务系统中，数据通常来自 后端接口。假设我们有一个 sales API 返回 JSON 数据如下：
{
"date": ["2024-05-01", "2024-05-02", "2024-05-03", "2024-05-04", "2024-05-05"],
"sales": [15, 22, 19, 30, 25]
}
在 Vue3 组件中，我们可以使用 axios 获取数据：
import { ref, onMounted } from "vue";
import axios from "axios";
const salesData = ref({ date: [], sales: [] });
onMounted(async () => {
const res = await axios.get("https://api.example.com/sales");
salesData.value = res.data;
});
✅ 数据成功获取！
下一步，我们需要将数据转换为 ECharts 需要的格式。
# 四、数据处理：整理为 ECharts 可用格式
ECharts 需要 x 轴 和 y 轴 数据，因此我们要转换 API 数据格式：
const option = {
xAxis: {
type: "category",
data: salesData.value.date, // 日期作为 X 轴
},
yAxis: {
type: "value",
},
series: [
{
data: salesData.value.sales, // 销售额作为 Y 轴
type: "line",
},
],
};
# 五、ECharts 渲染：在 Vue3 中显示图表
在 Vue3 组件中，我们可以用 echarts 渲染折线图：
<template>
<div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
const chartContainer = ref(null);
let chartInstance = null;
onMounted(() => {
chartInstance = echarts.init(chartContainer.value);
});
watch(() => salesData.value, (newData) => {
if (chartInstance) {
chartInstance.setOption({
xAxis: { type: "category", data: newData.date },
yAxis: { type: "value" },
series: [{ data: newData.sales, type: "line" }],
});
}
});
</script>
✅ 代码解析：
chartContainer绑定到<div>，用于渲染图表。onMounted里面用echarts.init()初始化图表。watch监听数据变化，动态更新图表。
# 六、动态更新：让数据自动变化
在实际业务中，数据可能每隔一段时间变化一次，比如 定时刷新 或 用户操作触发更新。我们可以用 setInterval 实现定时更新数据：
setInterval(async () => {
const res = await axios.get("https://api.example.com/sales");
salesData.value = res.data; // 触发 watch，自动更新图表
}, 5000);
这样，每 5 秒钟图表就会自动更新一次，实时展示最新数据！
# 七、总结：ECharts 数据可视化完整实现
🚀 完整流程回顾：
- 获取数据（调用 API，获取 JSON 数据）。
- 数据处理（转换为 ECharts 需要的格式）。
- 渲染图表（用
echarts.init()生成图表）。 - 动态更新（监听数据变化，自动更新图表）。
ECharts 强大且易用，无论是销售分析、用户增长趋势，还是服务器监控、财务报表，都能高效实现数据可视化。希望本文能帮助你在业务系统中更好地使用 ECharts！