从零开始学ECharts图表制作实用教程文档涵盖常见图表类型和真实应用场景

嘿！很高兴能带你一起踏上ECharts的学习之旅。别担心，这绝不是一次枯燥的技术布道。我们可以把它想象成在学一门“视觉语言”，你将学会如何将冰冷的数据，转化成能讲故事、能揭示规律的漂亮图表。无论是为了完成学校的课程项目、公司的数据报告，还是纯粹为了个人兴趣，掌握ECharts都会是一个超级有用的技能。让我们抛开恐惧，直接从最有趣的部分开始吧！

认识你的新伙伴：ECharts是什么，为什么选它？

简单来说，ECharts（Enterprise Charts）是百度开源的一个基于JavaScript的、功能强大的可视化库。你可以把它想象成一个装满了各种图表零件的超级工具箱。你想画柱状图、折线图、饼图？没问题。想让它们动起来，加点酷炫的交互效果？小菜一碟。想在大屏上展示复杂的地图和数据？它也能搞定。

为什么这么多开发者喜欢它呢？

免费又开源：你可以自由地使用它，不用担心版权问题。
文档超棒，示例丰富：官方提供了海量的、可直接复制运行的示例。这是新手的宝库，遇到问题先去官网翻翻示例，往往能立刻找到灵感。
图表类型齐全：从基础的统计图到复杂的关系图、热力图、3D图表，应有尽有。
交互和动画：默认的图表就带有流畅的动画和鼠标悬停提示等交互，非常友好。
主题定制：你不喜欢默认的颜色？没关系，可以轻松地切换成别的主题，甚至自己定义一套。

动手之前：准备工作与第一个图表

在开始画图之前，我们得先把“画布”准备好。

1. 创建HTML文件并引入ECharts 最简单的方式是通过CDN（内容分发网络）直接加载。你只需要创建一个.html文件，并在<head>或<body>中加入这行代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一个ECharts图表</title> <!-- 引入 ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> </head> <body> <!-- 准备一个具备大小（宽高）的DOM容器 --> <div id="main" style="width: 600px;height:400px;"></div> <script> // 初始化 echarts 实例基于准备好的dom var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '我的第一个ECharts图表' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>

用浏览器打开这个文件，你就能看到一个漂亮的柱状图了！是不是比想象中简单？

2. 理解核心三要素 通过上面的例子，我们可以提炼出使用ECharts最核心的三个步骤：

一个DOM容器：<div id="main"></div>，这就是你图表的“画布”，它必须有一个明确的宽高。
一个ECharts实例：var myChart = echarts.init(...)，这就是你的“画笔”，负责将配置画到画布上。
一个配置项对象：var option = { ... }，这是你图表的“设计蓝图”。图表长什么样，显示什么数据，全部由这个对象决定。

这个option对象是我们接下来要征服的主战场。

核心概念解析：看懂“设计蓝图” (Option)

option是一个巨大的JavaScript对象，里面包含了控制图表一切行为的属性。我们不必一次记住所有，但要理解几个关键部分。

option = { // 标题 title: { ... }, // 提示框，鼠标悬停时显示的小气泡 tooltip: { ... }, // 图例，用来区分不同系列的数据 legend: { ... }, // 直角坐标系下的x轴 xAxis: { ... }, // 直角坐标系下的y轴 yAxis: { ... }, // 系列列表，每个系列通过 type 决定用什么图表展示数据 series: [ { type: 'bar', data: [...] }, // 一个柱状图系列 { type: 'line', data: [...] } // 一个折线图系列 ] };

把xAxis和yAxis想象成坐标轴的刻度和标签，series则是真正被绘制在坐标轴上的图形（点、线、柱子等）。一个图表可以有多个系列，这样就能实现混合图表（比如既有柱状图又有折线图）。

常见图表类型实战与场景应用

理论说完了，我们来看点干货。不同类型的图表有不同的性格，用对了地方才能发挥最大威力。

1. 柱状图：比较的好帮手

性格：直观、有力，专门用来比较不同类别之间的数据大小。 核心配置项：series中的type: ‘bar‘。

// 混合图表示例：季度销售额(柱状图) + 利润率(折线图) var option = { title: { text: '季度业绩分析' }, tooltip: { trigger: 'axis' }, // 触发方式改为坐标轴触发，能同时显示同坐标轴下的所有系列数据 legend: { data: ['销售额', '利润率'] }, xAxis: { type: 'category', data: ['第一季度', '第二季度', '第三季度', '第四季度'] }, yAxis: [ { type: 'value', name: '销售额(万元)', position: 'left' }, // 第一个Y轴，对应销售额 { type: 'value', name: '利润率(%)', position: 'right', axisLabel: { formatter: '{value}%' } } // 第二个Y轴，对应利润率 ], series: [ { name: '销售额', type: 'bar', data: [200, 180, 240, 210] }, { name: '利润率', type: 'line', yAxisIndex: 1, // 指定使用第二个Y轴 data: [15, 12, 18, 16], tooltip: { valueFormatter: (value) => value + '%' } // 单独设置提示框格式 } ] };

真实应用场景：

电商运营：对比不同商品、不同店铺、不同月份的销售额、访问量。
人力资源：对比各部门人数、各学历员工占比。
教育统计：对比不同班级的平均分、不同年级的升学率。

2. 折线图：趋势的侦察兵

性格：擅长展示数据随时间或有序类别的变化趋势。 核心配置项：series中的type: ‘line‘。

var option = { title: { text: '网站每日访问量趋势' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, // boundaryGap设为false，让折线紧贴坐标轴 yAxis: { type: 'value' }, series: [{ name: '访问量', type: 'line', smooth: true, // 让折线变得平滑 areaStyle: { opacity: 0.2 }, // 填充区域并设置透明度 data: [120, 200, 150, 80, 70, 110, 130] }] };

真实应用场景：

股票分析：展示股价的日K线（通过特殊配置实现）、收盘价走势。
服务器监控：实时显示CPU使用率、内存占用、网络流量的变化。
项目进度：跟踪项目任务完成率的每周变化。

3. 饼图：比例的发言人

性格：直观展示整体中各部分所占的比例关系。 核心配置项：series中的type: ‘pie‘。

var option = { title: { text: '移动操作系统市场份额', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, // formatter自定义提示框内容 legend: { orient: 'vertical', left: 'left', data: ['Android', 'iOS', 'Windows Phone', '其他'] }, series: [{ name: '操作系统', type: 'pie', radius: '55%', // 设置饼图的半径，可以是百分比或固定值 center: ['50%', '60%', ], // 设置圆心位置 data: [ { value: 87.5, name: 'Android' }, { value: 11.5, name: 'iOS' }, { value: 0.5, name: 'Windows Phone' }, { value: 0.5, name: '其他' } ], emphasis: { // 设置鼠标 hover 到扇形上的高亮效果 itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] };

真实应用场景：

市场分析：展示不同品牌的市场占有率。
用户画像：展示用户性别、年龄、地域分布。
资源分配：展示公司预算在不同部门（研发、市场、行政）的分配比例。

4. 散点图：关系的探索者

性格：用于展示两个变量之间的相关性或分布规律。 核心配置项：series中的type: ‘scatter‘。数据格式为[x, y]的数组。

// 假数据：身高体重分布 var data = []; for (var i = 0; i < 50; i++) { data.push([Math.round(Math.random() * 30 + 160), Math.round(Math.random() * 40 + 50)]); // 随机生成身高和体重 } var option = { title: { text: '身高体重分布图' }, tooltip: { formatter: (params) => `身高：${params.value[0]}cm<br/>体重：${params.value[1]}kg` }, xAxis: { type: 'value', name: '身高(cm)' }, yAxis: { type: 'value', name: '体重(kg)' }, series: [{ type: 'scatter', symbolSize: (val) => val[1] / 5, // 点的大小由体重决定 data: data, itemStyle: { color: '#5470c6' } }] };

真实应用场景：

科学研究：分析实验中两个变量（如温度和压力、剂量和效果）之间的关系。
广告投放：分析广告投放金额（X轴）与获得的转化数（Y轴）之间的关系，寻找最优投放点。
性能测试：展示不同配置的服务器（X轴）在压力测试中的响应时间（Y轴）分布。

融会贯通：真实项目场景模拟

掌握了基础组件后，我们来想象一个更复杂的场景，看看如何组合它们。

场景：制作一个“电商平台销售数据仪表盘” 这个仪表盘可能包含以下几个部分：

核心指标卡片：今日GMV、订单数、客单价。（这部分不是图表，可以用HTML+CSS实现）
销售趋势图：近30天销售额折线图。
商品类别占比饼图：服装、数码、食品等各类别的销售额占比。
区域销售地图：全国各省份销售额热力图。
TOP10热销商品柱状图：销售额最高的10个商品。

技术实现思路：

你可以使用多个ECharts实例，分别渲染到不同的DOM容器中。
或者，使用一个ECharts实例，利用grid组件将一个大画布分割成多个区域，在每个区域绘制不同的图表。这种“多图联动”的效果更专业。
数据方面，通常需要通过AJAX（如使用fetch或axios）从后端API获取真实数据，然后用获取到的数据动态更新option中的series.data，最后调用myChart.setOption(newOption)刷新图表。