ECharts 简介与快速上手

🎯 引言

学会这篇文章，你能明白 ECharts 是什么、为什么它是前端数据可视化的主流方案。你还会在 Vue3 项目中完成 ECharts 的安装，并亲手画出一个简单的柱状图。

🧱 什么是 ECharts

ECharts 是一个开源的 JavaScript 数据可视化图表库，最初由百度团队开发，现在由 Apache 软件基金会维护，所以全称叫 Apache ECharts。

它的作用一句话就能说清：把枯燥的数据变成直观的图表。比如把一周的销量数字变成柱状图、把用户来源占比变成饼图，让人一眼看懂数据背后的信息。

ECharts 能画这些常见图表：

• 折线图、柱状图、饼图、散点图
• 雷达图、地图、热力图
• K 线图、关系图、仪表盘

✨ 为什么选择 ECharts

市面上的图表库不少，ECharts 能脱颖而出主要靠这几点：

🚀 安装 ECharts

当前课程环境使用 Node.js v22.0.0，安装的 ECharts 版本为 6.1.0。在 Vite 创建的 Vue3 项目中，执行：

npm install echarts

🛠 第一个图表

使用 ECharts 画图固定分三步，记住这个套路，后面所有图表都只是配置不同而已：

1. 准备一个 DOM 容器：必须有明确的宽和高。
2. 初始化图表实例：echarts.init(容器)。
3. 传入配置项：setOption(配置)，图表就画出来了。

<template>
    <!-- 第一步：准备容器，必须设置宽高 -->
    <div ref="chartRef" class="chart"></div>
</template>

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

const chartRef = ref(null);

onMounted(() => {
    // 第二步：初始化图表实例
    const chart = echarts.init(chartRef.value);

    // 第三步：传入配置项
    chart.setOption({
        title: {
            text: '一周销量',
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                type: 'bar',
                data: [120, 200, 150, 80, 70],
            },
        ],
    });
});
</script>

<style scoped>
.chart {
    width: 100%;
    height: 400px;
}
</style>

下面是这段代码在页面上的真实渲染效果：

打开页面，你就能看到一个带标题的柱状图了。

🧾 小节总结

• ECharts 是 Apache 旗下的开源可视化图表库，作用是把数据变成直观图表。
• 它的特点是开箱即用、图表丰富、交互强大、中文文档友好。
• 使用 npm install echarts 安装，课程基于 Node.js v22.0.0 和 ECharts 6.1.0。
• 画图三步走：准备有宽高的容器 → echarts.init() 初始化 → setOption() 传配置。
• 必须在 onMounted 中初始化，且容器高度不能为 0。

❓ 知识问答

Q1：为什么我的图表不显示，控制台也没报错？

九成是容器高度为 0。检查容器是否设置了 height，以及父元素是否把它的高度压没了。

Q2：可以在原生 HTML 或其他框架里用 ECharts 吗？

可以。ECharts 本身不依赖任何框架，Vue、React、原生 JS 都能用。本课程统一用 Vue3 演示。

Q3：import * as echarts from 'echarts' 这种写法是什么意思？

它把 echarts 模块导出的所有内容都放到 echarts 这个对象里，之后通过 echarts.init 等方式调用。

🧪 小练习

在上面第一个图表的基础上，完成下面的改造：

1. 把标题改成“本周访客数”。
2. 把横轴改成周一到周日共七天，数据自己填。
3. 把图表类型 type 从 'bar' 改成 'line'，观察变化。

<template>
    <div ref="chartRef" class="chart"></div>
</template>

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

const chartRef = ref(null);

onMounted(() => {
    const chart = echarts.init(chartRef.value);

    // 请在这里编写代码
});
</script>

<style scoped>
.chart {
    width: 100%;
    height: 400px;
}
</style>

🎉 恭喜你迈出了数据可视化的第一步！下一篇我们会详细拆解 setOption 里那个神秘的配置对象，搞清楚每一部分到底管什么。