用ECharts做漂亮的数据图表：零基础教程

数据可视化是什么？

简单说，就是把一堆数字变成好看的图表。比如你有12个月的销售数据，用柱状图一展示，哪个月高哪个月低一目了然。比看一堆数字直观多了。

ECharts是什么？

ECharts是百度开发的一个免费图表工具，被全世界很多公司和个人使用。它的优势是：免费、好看、种类多（折线图、柱状图、饼图、地图……应有尽有）。

5分钟做出第一个图表

创建一个文件叫 chart.html，用浏览器打开就能看到效果：

保存后用浏览器打开这个文件，你会看到一个漂亮的蓝色柱状图。

代码解释（用做菜来比喻）

这段代码就像一份菜谱：

准备锅（创建图表容器）：那个div就是你的"锅"，图表画在里面。

放食材（填入数据）：xAxis里的月份是X轴标签，series里的数字是柱子的高度。

调味道（设置样式）：title是图表标题，itemStyle里的color是柱子的颜色。

开火（初始化渲染）：echarts.init 就是"开火"，让图表显示出来。

换个图表类型

想要折线图？只需要把 type: bar 改成 type: line。想要饼图？稍微调整一下数据格式就行。

饼图的数据格式：

series: [{
type: 'pie',
data: [
{value: 335, name: '北京'},
{value: 310, name: '上海'},
{value: 234, name: '广州'},
{value: 135, name: '深圳'}
]
}]

用AI帮你写图表代码

不想自己写代码？把你的数据发给AI：

"我有这些数据（粘贴你的数据），帮我写一个ECharts图表的HTML代码，要折线图，风格清新好看。"

AI会生成完整的代码，你复制到HTML文件里打开就能用。

ECharts官方示例

去 echarts.apache.org/examples 看看，里面有几百个图表示例。找到你喜欢的，直接复制代码，把数据换成你自己的就行。

实用场景

数据可视化是一项很值得学的技能，而ECharts是入门的最佳选择。