异常教程
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+ 小伙伴加入学习 ，欢迎点击围观
前言：走进 ECharts 教程的世界
在数据可视化领域，ECharts 以其丰富的图表类型和强大的交互功能，成为开发者展示数据故事的首选工具。无论是编程初学者还是中级开发者，通过本教程都能快速掌握 ECharts 的核心能力。本文以“ECharts 教程”为主线，通过循序渐进的讲解、形象的比喻和实际案例，帮助读者从零构建专业的数据可视化项目。
环境搭建：ECharts 教程的第一步
方法 1：通过 CDN 引入
ECharts 的使用门槛极低。对于编程新手，最简单的入门方式是直接通过 CDN 引入 JavaScript 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 教程：第一个图表</title>
<!-- 引入 ECharts 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化图表容器
var chart = echarts.init(document.getElementById('chart'));
// 配置数据和样式
var option = {
title: { text: '我的第一个图表' },
xAxis: { data: ['A', 'B', 'C'] },
yAxis: {},
series: [{
name: '示例',
type: 'bar',
data: [10, 20, 30]
}]
};
// 渲染图表
chart.setOption(option);
</script>
</body>
</html>
方法 2：通过 NPM 安装
对于熟悉前端工程化的开发者，可以通过 NPM 安装 ECharts：
npm install echarts --save
安装后在项目中引入：
import * as echarts from 'echarts';
基础图表类型：从柱状图到折线图的构建
柱状图：用高度说话
柱状图通过垂直或水平的条形展示数据差异，适合比较不同类别的数值。例如，假设我们要比较三个城市的人口数量：
var option = {
xAxis: {
type: 'category',
data: ['北京', '上海', '广州']
},
yAxis: { type: 'value' },
series: [{
type: 'bar',
data: [2154, 2415, 1868],
itemStyle: { color: '#5470c6' } // 设置颜色
}]
};
比喻：
柱状图就像一群站在不同高度的士兵，每个士兵的身高代表一个城市的数值，一眼就能看出谁更高大威武。
折线图：追踪数据趋势
折线图通过连接数据点的线条展示变化趋势，适用于时间序列数据。例如，展示某产品月销量变化：
var option = {
xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
yAxis: { type: 'value' },
series: [{
type: 'line',
data: [120, 132, 101],
smooth: true // 开启平滑曲线
}]
};
关键点：
smooth属性让折线更流畅，适合表现连续变化。- 通过
symbol属性可自定义数据点形状（如圆形、菱形）。
数据处理：让图表“吃”懂数据
数据格式规范
ECharts 的数据源通常为数组或对象数组。例如，饼图需要数据项包含 value 和 name：
// 饼图数据示例
series: [{
type: 'pie',
data: [
{ value: 400, name: '苹果' },
{ value: 335, name: '香蕉' },
{ value: 310, name: '橙子' }
]
}]
数据转换技巧
当原始数据需要预处理时，可使用 transform 属性。例如，将多列数据合并为单列：
var option = {
dataset: {
source: [
['产品', '销量', '成本'],
['A', 120, 80],
['B', 150, 90]
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [{
type: 'bar',
encode: {
x: '产品',
y: '销量' // 指定显示销量列
}
}]
};
进阶功能：交互与动态更新
响应式交互
通过 tooltip 和 legend 实现动态交互：
var option = {
tooltip: { trigger: 'item' }, // 鼠标悬停显示详细信息
legend: {
data: ['销量', '成本'], // 右侧图例开关
selected: { '成本': false } // 默认隐藏成本
},
series: [{
type: 'line',
name: '销量',
data: [120, 132, 101]
}, {
type: 'line',
name: '成本',
data: [80, 85, 78]
}]
};
动态数据更新
通过 setOption 方法实时更新图表：
// 每秒更新随机数据
setInterval(function () {
chart.setOption({
series: [{
data: Math.random() * 200
}]
});
}, 1000);
实战案例：气象数据可视化
需求分析
假设需要展示某城市一周内的气温变化，同时叠加降水量数据。
实现步骤
- HTML 容器
<div id="weather-chart" style="width: 800px; height: 500px;"></div>
- 配置双 Y 轴
var option = {
title: { text: '一周天气趋势' },
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [
{ type: 'value', name: '温度 (℃)' }, // 左侧 Y 轴
{
type: 'value',
name: '降水量 (mm)',
position: 'right' // 右侧 Y 轴
}
],
series: [{
name: '温度',
type: 'line',
yAxisIndex: 0, // 绑定左侧 Y 轴
data: [22, 25, 28, 30, 27, 24, 21]
}, {
name: '降水量',
type: 'bar',
yAxisIndex: 1, // 绑定右侧 Y 轴
data: [0, 5, 10, 0, 15, 8, 0]
}]
};
- 最终效果
通过双 Y 轴设计，用户可同时观察温度与降水量的关联性。
结论：从 ECharts 教程到数据叙事大师
通过本文的 ECharts 教程，读者已掌握了从环境搭建到复杂图表构建的完整流程。无论是基础图表的快速上手，还是进阶功能的深度探索，ECharts 都提供了灵活的配置选项和强大的交互能力。
下一步建议：
- 探索更多图表类型（如热力图、桑基图）
- 结合后端数据接口实现动态数据加载
- 使用 ECharts GL 实现三维可视化
数据可视化不仅是技术的展现，更是故事的讲述。希望本教程能成为你探索数据世界的起点！