Echarts零基础入门从安装配置到第一个柱状图实战教程视频

嘿，朋友！既然你点开了这篇内容，说明你大概是刚接触数据可视化，或者正被那些花里胡哨的图表代码搞得头昏脑涨。别慌，我不是来给你念教程文档的，咱们就像坐在咖啡馆里，我一边给你倒杯咖啡，一边带你撸出人生第一个 ECharts 图表。

你可能在网上搜到过几百个“ECharts 教程”，有的太老（还在讲怎么引入那个已经没人用的老版本），有的太简（只给代码不给解释），还有的上来就讲配置项，听得人云里雾里。这篇内容，我就是专门为了让你“真的懂”而写的。我会把那些“老师傅”觉得理所当然、但实际上坑死小白的细节，全都摊开给你看。

为什么是 ECharts？别纠结，先上车再说

在开始之前，很多人会问：“百度？还是 Chart.js？还是 D3.js？”

听我说，如果你是一个 Chinese Developer，或者你的项目主要面向国内用户，ECharts 几乎是唯一不用犹豫的选择。

这里的几个理由，很现实：

国内生态最强：遇到问题，百度一下全是中文解决方案。D3 的资料英文为主，而且学习曲线陡峭得像喜马拉雅。
文档友好：ECharts 的官方文档做得非常规范，每个配置项都有示例，还有“配置项手册”和“实例大全”，简直是保姆级教程。
中文支持好：这是关键！很多欧美图表库对中文字体的处理简直灾难，ECharts 原生支持中文，还内置了中文字体优化。
性能不错：基于 Canvas，渲染大量数据时比 SVG 方案（如 D3 默认模式）流畅得多。

注意：现在 ECharts 已经到了 5.x 版本，网上很多教程还是 4.x 甚至 3.x 的。5.x 相比旧版本，最大的变化是TreeShaking 支持更好，动画性能提升，以及一些 API 的规范化。所以，请确保你跟着这个教程学的是最新版。

第一部分：环境搭建 —— 别踩坑，从“Hello World”开始

很多新手第一步就卡住：怎么引入？用 CDN？还是 npm？

方案一：最简单粗暴 —— CDN 引入（适合快速原型、学习、小型项目）

这是最适合零基础入门的方式。你不需要安装 Node.js，不需要懂 npm，只需要一个 HTML 文件。

在你的电脑上创建一个文件夹，比如叫 echarts-demo。
在里面新建一个文件，叫 index.html。
打开 index.html，复制粘贴下面这段代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个 ECharts 图表</title>
    <!-- 引入 ECharts 文件，这里用最新的 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        /* 关键一步：给图表容器设置高度！ */
        #main {
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 为 ECharts 准备一个 div 容器 -->
    <div id="main"></div>

    <script type="text/javascript">
        // 基于准备好的 dom，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定配置项和数据
        var option = {
            title: {
                text: '我的第一个柱状图'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

双击打开这个 index.html 文件，你就会看到一个漂亮的柱状图！

关键点拨：

我用了 echarts@5.4.3，这是截至 2024 年中后期的稳定版。不要用太老的版本（比如 3.x 或 4.2），因为 API 可能有变化。

容器必须有高度：这是新手最容易踩的坑！如果你的 #main div 没有设置高度，图表会显示不出来（或者高度为 0）。我在 CSS 里写了 height: 400px，这是必须的。

echarts.init() 是入口函数，它把一个 DOM 元素变成图表实例。

方案二：现代前端项目 —— npm 安装（适合 React/Vue/Angular 项目）

如果你在用 Vue、React 或者任何现代前端框架，你应该用 npm 安装。

打开终端，进入你的项目目录。
运行命令：
```
npm install echarts --save
```

在你的 JS 文件中引入：


import * as echarts from 'echarts';
// 或者按需引入，更节省体积
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar'; // 只引入你需要的图表类型

为什么推荐按需引入？ ECharts 整个库很大，如果你只用柱状图，却引入了全部代码，会让你的包体积增加几百 KB。按需引入可以做到“只加载你用的”。

第二部分：拆解第一个柱状图 —— 理解 ECharts 的“配置项”逻辑

现在你有了第一个图表，但你可能还不理解为什么这么写。别急，我们来拆解 option 对象。

ECharts 的核心思想就是 “配置项驱动”。你不需要写复杂的绘图代码，只需要填写一个 JSON 对象，ECharts 就会根据你的配置，自动画出图表。

这个 JSON 对象叫 option，它由多个部分组成：

1. title：标题

title: {
    text: '我的第一个柱状图', // 主标题
    subtext: '这是副标题',    // 副标题（可选）
    left: 'center'           // 标题位置，默认是 left，我改成居中
}

小技巧：title 可以有很多属性，比如 textStyle（文字样式）、padding（内边距）等。你可以去官方文档的“配置项手册”里看每个属性的详细说明。

2. tooltip：提示框

tooltip: {
    trigger: 'item' // 触发类型，'item' 表示鼠标悬停在数据点上时触发，'axis' 表示鼠标悬停在坐标轴上时触发
}

为什么重要？ tooltip 是图表的“交互灵魂”。没有它，用户只能看到静态的柱子，不知道具体数值。trigger: 'item' 是柱状图、饼图常用的设置；对于折线图，trigger: 'axis' 会更实用，因为它会显示一条垂直的指示线，让你看清每个 X 轴位置对应的 Y 值。

3. xAxis：直角坐标系Grid 中的 x 轴

xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
}

关键点：
在柱状图中，xAxis 通常是类目轴（Categorical Axis），也就是你看到的横轴上的文字标签。

data 数组里的每一项，对应横轴上的一个分类。
如果你不设 type: 'category'，ECharts 会默认根据数据判断。但为了保险，你可以显式写成：
>   xAxis: {
>       type: 'category',
>       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
>   }
>
4. yAxis：直角坐标系 Grid 中的 y 轴
yAxis: {}
这里我留空了。为什么？因为对于简单的柱状图，ECharts 会自动帮你生成 Y 轴（数值轴）。你不需要手动配置它，除非你想控制坐标轴的范围、标签格式等。

进阶技巧：如果你想让 Y 轴从 0 开始（防止图表看起来更“夸张”），可以这样写：
> yAxis: {
>     min: 0,
>     max: 50
> }
> ```

### 5. series：系列列表

这是**最核心**的部分！`series` 是一个数组，每个元素代表一个数据系列。

```javascript
series: [{
    name: '销量',       // 系列名称，用于 tooltip 的显示
    type: 'bar',        // 图表类型，'bar' 表示柱状图
    data: [5, 20, 36, 10, 10, 20] // 数据，与 xAxis.data 一一对应
}]
为什么是数组？ 因为一个图表可以有多个系列。比如，你可以同时画“今年销量”和“去年销量”两组柱子，进行对比。那时 series 里就会有两个对象。

第三部分：实战演练 —— 把上面的代码变成你自己的

现在，我们来动手改一改。不要只是看，要敲代码。

任务 1：改数据，让图表动起来

把你刚才 HTML 里的 data 数组改掉，换成你自己的数据。

xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [{
    name: '访问量',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130]
}]

刷新页面，看看图表是不是变了？

任务 2：添加副标题和修改标题位置

title: {
    text: '本周网站访问量统计',
    subtext: '数据来源：后台系统',
    left: 'center',
    top: 10,
    textStyle: {
        fontSize: 20,
        fontWeight: 'bold'
    }
}

任务 3：让柱子更漂亮 —— 修改柱子颜色和宽度

series: [{
    name: '访问量',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130],
    itemStyle: {
        color: '#5470c6', // 柱子颜色
        borderRadius: [4, 4, 0, 0] // 柱子顶部圆角
    },
    barWidth: '60%' // 柱子宽度，可以是像素，也可以是百分比
}]

注意：itemStyle 是控制单个数据点样式的地方。borderRadius 是一个数组，四个值分别对应 [左上, 右上, 右下, 左下] 的圆角。

任务 4：添加标签 —— 在柱子上显示数值

series: [{
    name: '访问量',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130],
    label: {
        show: true,
        position: 'top' // 标签位置：'top', 'inside', 'bottom' 等
    }
}]

现在，每个柱子上方都会显示具体的数值了。

第四部分：常见问题与避坑指南

在实战过程中，你大概率会遇到以下问题。我把这些“坑”提前告诉你，帮你节省时间。

问题 1：图表显示不出来，一片空白

原因：

容器没有设置高度：再次强调，这是最常见的错误。检查你的 CSS，确保 #main 有明确的 height。
CDN 加载失败：如果你的网络环境访问外网有问题，CDN 可能加载失败。尝试换用国内 CDN，比如：
```
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
```
DOM 未加载完成：如果你的 JS 代码在 head 里执行，而此时 body 还没加载，document.getElementById('main') 就会返回 null。解决办法是把 <script> 标签放到 </body> 之前，或者用 DOMContentLoaded 事件：
```
document.addEventListener('DOMContentLoaded', function() {
   var myChart = echarts.init(document.getElementById('main'));
   // ... 其他代码
});
```

问题 2：X 轴标签太长，被截断或重叠

原因：标签文字太长，默认情况下，ECharts 会自动旋转标签，但有时还是会重叠。

解决方案：

旋转标签：


xAxis: {
   axisLabel: {
       rotate: 45 // 旋转 45 度
   }
}

隐藏部分标签：如果数据点很多，可以只每隔几个显示一个。


xAxis: {
   axisLabel: {
       interval: 2 // 每隔 2 个标签显示一个，0 表示全部显示
   }
}

使用省略号：


xAxis: {
   axisLabel: {
       formatter: function(value) {
           return value.length > 5 ? value.substring(0, 5) + '...' : value;
       }
   }
}

问题 3：如何响应式适配？

当浏览器窗口大小改变时，图表不会自动调整大小。你需要监听窗口的 resize 事件。

解决方案：

// 初始化图表后
window.addEventListener('resize', function() {
    myChart.resize();
});

或者，如果你在用 Vue/React，应该在组件的 mounted/useEffect 中监听，在 unmounted/cleanup 中移除监听。

第五部分：进阶 —— 从柱状图到折线图，再到组合图

一旦你掌握了柱状图，其他图表类型就迎刃而解了。因为 ECharts 的配置项是高度统一的！

改成折线图

只需要把 type: 'bar' 改成 type: 'line'：

series: [{
    name: '访问量',
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130],
    smooth: true, // 平滑曲线
    areaStyle: { // 填充区域
        color: 'rgba(84, 112, 198, 0.3)'
    }
}]

组合图：柱状图 + 折线图

有时候，我们需要在同一张图里展示两种不同类型的数据。比如，用柱状图展示“销量”，用折线图展示“增长率”。

option = {
    title: { text: '销量与增长率' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['销量', '增长率'] },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
        { type: 'value', name: '销量', position: 'left' },
        { type: 'value', name: '增长率', position: 'right', // 右边的 Y 轴
          axisLabel: { formatter: '{value} %' } }
    ],
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130],
            yAxisIndex: 0 // 使用左边的 Y 轴
        },
        {
            name: '增长率',
            type: 'line',
            data: [10, 15, 12, 8, 5, 11, 13],
            yAxisIndex: 1 // 使用右边的 Y 轴
        }
    ]
};

关键点：

yAxis 是一个数组，可以定义多个 Y 轴。

yAxisIndex 告诉 ECharts 这个系列用哪个 Y 轴。

legend 会自动生成图例，方便用户切换显示/隐藏某个系列。

第六部分：如何像专家一样学习 ECharts

不要死记硬背配置项：ECharts 的配置项非常多，成千上万。你不需要全部记住。学会查文档才是关键。
善用“实例大全”：官方文档的“实例大全”页面，有几百个现成的图表案例。你只需要复制代码，然后修改数据和部分配置，就能看到效果。这是最快的学习方式。
用 Chrome 开发者工具调试：在浏览器中打开图表页面，按 F12 打开开发者工具。在“元素”面板中，

正文

Echarts零基础入门从安装配置到第一个柱状图实战教程视频

为什么是 ECharts？别纠结，先上车再说

这里的几个理由，很现实：

第一部分：环境搭建 —— 别踩坑，从“Hello World”开始

方案一：最简单粗暴 —— CDN 引入（适合快速原型、学习、小型项目）

方案二：现代前端项目 —— npm 安装（适合 React/Vue/Angular 项目）

第二部分：拆解第一个柱状图 —— 理解 ECharts 的“配置项”逻辑

1. title：标题

2. tooltip：提示框

3. xAxis：直角坐标系Grid 中的 x 轴

4. yAxis：直角坐标系 Grid 中的 y 轴

第三部分：实战演练 —— 把上面的代码变成你自己的

任务 1：改数据，让图表动起来

任务 2：添加副标题和修改标题位置

任务 3：让柱子更漂亮 —— 修改柱子颜色和宽度

任务 4：添加标签 —— 在柱子上显示数值

第四部分：常见问题与避坑指南

问题 1：图表显示不出来，一片空白

问题 2：X 轴标签太长，被截断或重叠

问题 3：如何响应式适配？

第五部分：进阶 —— 从柱状图到折线图，再到组合图

改成折线图

组合图：柱状图 + 折线图

第六部分：如何像专家一样学习 ECharts

相关阅读

揭秘：曲解风水？新手必看！破解入门误区，视频教你真实风水知识

揭秘风水奥秘：新手快速入门指南，轻松掌握家居布局秘诀

告别健身小白：轻松上手，打造健康体态的简单力量训练指南

新手必看：轻松掌握机车换挡技巧，告别驾驶难题

新手如何轻松驾驭高颜值机车，解锁安全骑行之道

新手如何轻松上手本田雅阁：图片解析与技巧分享

新手机车选择：安全可靠，易上手的小排量车型攻略

学会真皮手帐制作：手把手教你从零开始打造个性化日记

新手如何轻松入门旅游行业：掌握技巧，拓展视野，开启精彩旅程

旅行美妆达人必备：轻松掌握旅行字体攻略，让你的笔记更精彩