ECharts数据可视化 课件 第3章 柱状图和散点图.pptx

第3章柱状图和散点图《ECharts数据可视化》

学习目标/Target掌握柱条背景样式的设置方法，能够设置柱条的背景色、背景描边色、背景描边类型等掌握柱状图标线的使用方法，能够设置最大值标线、最小值标线、平均值标线等熟悉柱条宽度和间距的设置方法，能够总结柱条宽度、最大宽度、最小宽度、间距的用法掌握图形和标签高亮样式的设置方法，能够设置图形和标签高亮样式掌握柱条样式的设置方法，能够设置柱条的颜色、描边线宽、描边色、阴影、不透明度等

学习目标/Target掌握柱状图文本标签的使用方法，能够设置文本标签的显示状态、位置等掌握柱状图标注样式的使用方法，能够设置标注信息掌握坐标轴组件中分隔线的使用方法，能够设置x轴、y轴的分隔线掌握坐标轴组件中不显示零刻度的设置，能够实现x轴、y轴上零刻度的显示与隐藏掌握涟漪动画的相关配置，能够设置涟漪动画的大小、颜色、周期等

学习目标/Target掌握涟漪动画显示时机的设置，能够控制涟漪动画何时开始显示掌握常见柱状图的绘制，能够完成基础柱状图、堆叠柱状图、阶梯瀑布图和堆叠条形图的绘制掌握常见散点图的绘制，能够完成基础散点图、带有涟漪动画的散点图、气泡图的绘制

章节概述/Summary通过对第2章的学习，大家应该已经掌握了绘制常见折线图和饼图的方法，以及ECharts中常用组件的基本使用。通过配置项的设置，可以实现所需折线图和饼图的效果。接下来，本章将讲解如何绘制常见的柱状图和散点图。

目录/Contents3.13.2常见的柱状图常见的散点图

常见的柱状图3.1

绘制基础柱状图【任务3.1.1】

任务需求小蔡是一家小超市的老板，售卖多种商品。他想以柱状图的形式查看某款洗发水在过去一年中每个月的销售情况，根据销量来决定以后的进货量，以便更好地管理库存。为此，他翻看了该款商品过去一年的销售数据，并将这些数据汇总在月销售情况报表中。本任务需要基于某款洗发水一年的销售情况绘制基础柱状图。

某款洗发水一年的销售情况（单位：瓶）如下表所示。月份销量1月7402月9003月7004月8005月9206月750任务需求月份销量7月4008月6009月55010月29011月39212月400

知识储备1.初识基础柱状图先定一个小目标！了解基础柱状图的概念，能够说出什么是基础柱状图

知识储备1.初识基础柱状图基础柱状图是一种简单明了、易于理解的数据可视化图表。一般来说，基础柱状图通常由x轴（横轴）、y轴（纵轴）和柱条（矩形）组成，用于展示分类数据的分布情况，它能够让用户直观地了解数据的规模、趋势和分布情况。

知识储备1.初识基础柱状图纵向基础柱状图在纵向基础柱状图中，x轴一般为类目轴，代表不同的数据类型或分类；y轴一般为数值轴，代表数据数量、大小或比例。一般来说，纵向基础柱状图的数据量不宜过多，否则会导致图表过于拥挤、难以阅读。横向基础柱状图在横向基础柱状图中，x轴一般为数值轴，代表数据数量、大小或比例；y轴一般为类目轴，代表不同的数据类型或分类。根据坐标轴的布局方式不同，分为纵向基础柱状图和横向基础柱状图（条形图）两种表现方式。

知识储备1.初识基础柱状图（1）纵向基础柱状图纵向基础柱状图的效果如下图所示。x轴为类目轴，y轴为数值轴，第1根柱条的长度代表香蕉的销量，第2根柱条的长度代表苹果的销量。

知识储备1.初识基础柱状图（2）横向基础柱状图横向基础柱状图的效果如下图所示。x轴为数值轴，y轴为类目轴，从下往上数第1根柱条的长度代表香蕉的销量，第2根柱条的长度代表苹果的销量。

知识储备1.初识基础柱状图在ECharts中绘制基础柱状图时，需要将系列的type属性的值设置为bar。series:[{type:bar}]指定该系列图表类型为基础柱状图

知识储备2.柱条的背景样式先定一个小目标！掌握柱条背景样式的设置方法，能够设置柱条的背景色、背景描边色、背景描边类型等

知识储备2.柱条的背景样式注意：使用backgroundStyle属性时必须将showBackground属性的值设置为true才能生效，showBackground属性用于设置是否显示柱条的背景色。设置方式：通过系列的backgroundStyle属性可以设置柱条的背景样式。series:[{type:bar,showBackground:true,backgroundStyle:{}}]柱条的背景样式包括背景色、背景描边色、背景描边类型等。

知识储备2.