ECharts的常用图表

实训案例：

案例1：会员基本信息及消费能力对比分析

1.训练要求

(1)掌握堆积柱状图的绘制。

(2)掌握标准条形图的绘制。

(3)掌握瀑布图的绘制。

2．需求说明

“会员信息表.xlsx ”文件记录了某鲜花店销售系统上的会员信息，具体包括会员编号、姓名、性别、年龄、年龄段、城市、入会方式、会员级别、会员人会日、 VIP 建立日、购买总金额、购买总次数信息。绘制堆积柱状图分析会员年龄分布，绘制标准条形图分析会员入会渠道，绘制瀑布图分析不同城市会员消费总金额分布。

3．实现思路及步骤

(1）在 VS Code 中依次创建3个 .html 文件，分别为 stackBar.html 、standBar.html 和 falls. html 。

(2）绘制堆积柱状图。首先，在 stackBar.html 文件中引入 echarts . js 库文件。其次，准备一个具备大小(weight 与 height) 的 div 容器，并使用init()方法初始化容器。最后，设置堆积柱状图的配置项、“性别”与“人会方式”数据，完成堆积柱状图绘制。

(3）绘制标准条形图。首先，在 standBar.html 文件中引入 echarts . js 库文件。其次，准备一个具备大小(weight 与 height) 的 div 容器，并使用 init()方法初始化容器。最后，设置标准条形图的配置项、“性别”与“年龄段”数据，完成标准条形图绘制。

(4）绘制瀑布图。首先，在 falls. html 文件中引入 echarts. js 库文件。其次，准备一个具备大小(weight 与 height) 的div 容器，并使用init()方法初始化容器。最后，设置瀑布图的配置项、“城市”与“购买总金额”数据，完成瀑布图绘制。

代码展示：

堆积柱状图：

标准条形图： 

 瀑布图：

 案例2：会员来源结构分析

1．训练要点

(1）掌握饼图的绘制。

(2）掌握环形图的绘制。

2.需求说明

基于“会员信息表.xlsx ”数据，绘制饼图和环形图分析会员入会渠道分布。

3．实现思路及步骤

(1）在 VS Code中创建 pie.html 和 circular.html 文件。

(2）绘制饼图。首先，在 pie.html 文件中引入echarts . js 库文件。其次，准备一个具备大小(weight 与 height) 的div 容器，并使用init()方法初始化容器。最后，设置饼图的配置项和“入会方式”数据，完成饼图绘制。

(3）绘制环形图。首先，在 circular.html文件中引入 echarts . js 库文件。其次，准备一个
具备大小(weight 与 height) 的div 容器，并使用init()方法初始化容器。最后，设置圆环图的配置项和“入会方式”数据，完成圆环图绘制。

代码展示：

饼图：

环形图：