ECharts 入门教程
ECharts（Apache ECharts）是一个由 Apache 基金会维护的开源 JavaScript 数据可视化库，它提供丰富的图表类型（如折线图、柱状图、饼图、散点图、地图等），支持高度交互和自定义，兼容主流浏览器和移动设备，免费商用（Apache-2.0 协议）。
推荐学习资源
- 官方文档（强烈推荐）：最权威、最全面的教程和示例。
- 快速上手：https://echarts.apache.org/handbook/zh/get-started/
- 示例 gallery：https://echarts.apache.org/examples/zh/
- 完整手册：https://echarts.apache.org/handbook/zh/
- 中文教程网站：
- 菜鸟教程（runoob）：https://www.runoob.com/echarts/echarts-tutorial.html （适合初学者，包含安装、配置、各种图表示例）
快速上手：你的第一个 ECharts 图表
以下是一个简单的柱状图示例，直接复制到 HTML 文件中运行即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>我的第一个 ECharts 图表</title>
<!-- 从 CDN 引入 ECharts（推荐最新版） -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小的 DOM 容器 -->
<div id="main" style="width: 800px; height: 500px;"></div>
<script type="text/javascript">
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));
// 配置选项（option）
var option = {
title: {
text: 'ECharts 入门示例：销量柱状图'
},
tooltip: {}, // 鼠标悬停提示
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar', // 图表类型：bar 为柱状图
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>保存为 index.html，用浏览器打开即可看到一个简单的柱状图。
核心步骤解释
- 引入 ECharts：使用 CDN 最简单（无需下载），或从官网下载 echarts.min.js。
- 准备 DOM 容器：必须有宽高（如 div）。
- 初始化实例：
echarts.init(dom)。 - 设置 option：这是 ECharts 的核心配置，包括 title、tooltip、legend、xAxis、yAxis、series 等。
- 渲染图表：
myChart.setOption(option)。
常见配置项简介
- title：图表标题。
- tooltip：鼠标悬停提示。
- legend：图例（多系列时用于切换）。
- xAxis / yAxis：坐标轴设置。
- series：数据系列（核心），type 指定图表类型（如 ‘line’ 折线图、’pie’ 饼图）。
更多高级用法（如异步加载数据、主题切换、事件监听），请参考官方手册或示例 gallery，那里有上千个可直接复制的代码示例。
如果你有具体图表需求（如饼图、地图、动态数据），告诉我，我可以给出针对性示例！
