聊了一晚上，更确信 AI 离取代人还差很远
2026/5/10 12:42:07
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 文件中运行即可。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><title>我的第一个 ECharts 图表</title><!-- 从 CDN 引入 ECharts（推荐最新版） --><scriptsrc="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script></head><body><!-- 为 ECharts 准备一个具备大小的 DOM 容器 --><divid="main"style="width:800px;height:500px;"></div><scripttype="text/javascript">// 初始化 ECharts 实例varmyChart=echarts.init(document.getElementById('main'));// 配置选项（option）varoption={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，那里有上千个可直接复制的代码示例。
如果你有具体图表需求（如饼图、地图、动态数据），告诉我，我可以给出针对性示例！