《数据可视化技术》 课件 07 应用直角坐标轴图描绘电脑销量情况、08 应用非直角坐标轴图描绘手机经营情况.pptx

《数据可视化技术》单元7应用直角坐标轴图描绘电脑销量情况

项目介绍本次课开始学习项目二：数码产品销售数据ECharts可视化数码产品主要包括计算机、通信和消费电子产品。对数码产品销售数据进行分析和可视化展示，有助于相关人员了解各种产品销售情况，了解哪些是畅销产品、哪些是冷门产品，帮助改进营销和投资。本项目使用ECharts技术完成对数码产品销售数据的分析与可视化。

01准备活动点名、复习本次课学习内容、学习目标介绍

学习内容任务一应用直角坐标轴图描绘计算机销量情况为了描述不同品牌的数码产品不同月份销量变化情况，描述产品各月销量对比情况，以及影响产品销量的各种因素之间的关系，需要灵活运用折线图、柱状图、散点图和气泡图绘制各种图形，帮助商家分析产品销量情况、影响销量的因素，有助于商家改进经营方法和手段。任务分解：子任务13种品牌计算机各月销量折线图绘制（多线折线图）子任务2历年笔记本计算机不同价位销量堆叠柱状图绘制（堆叠水平柱状图）子任务3绘制联想各系列笔记本计算机销售利润情况气泡图（气泡图）

学习目标1、知识（1）掌握折线图、柱状图的绘制（2）掌握散点图、气泡图的绘制2、技能（1）能够绘制折线图、柱状图、散点图、气泡图3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力

02发展活动任务分析、任务资讯、演示讲解、任务实施

子任务13种品牌计算机各月销量折线图绘制（多线折线图）任务分析：某计算机专卖店主要销售品牌计算机，2021年3种品牌计算机每月销量见表2-2-1。利用上面数据绘制多条折线图，横轴为月份，纵轴为数量，显示标题、提示框、图例，并显示每种品牌计算机的平均销量标志线。

1、折线图任务资讯折线图是一种将点连接成线的基础图形，用于表示数据的变化趋势，一般用在时间序列中显示数据的趋势。（1）基础折线图ECharts创建折线图，需要将数据系列（series）中的type设为line，同时保证xAxis横轴数据长度和series纵轴数据长度一致，示例代码如下

1、折线图任务资讯（2）多条折线图当series数组中放入多个系列数据时，就可以绘制多条折线图

1、折线图任务资讯（2）堆叠折线图为了让数据呈现叠加效果，即从第一个系列数据开始，后一个系列数据在前一个系列数据的基础上，分别累加，并且填充折线与横轴之间的区域，那么可以在series参数的每个系列中加上stack和areaStyle参数。stack：Total实现数据的叠加，stack后面引号内容相同即可。areaStyle：{}实现数据区域的填充，大括号内容可以为空。在上一个示例基础上，实现数据堆叠只要修改series参数即可，代码如下：

任务实施ECharts最基本的代码结构引入js文件,DOM容器,初始化对象,设置optionOption设置：title设置了标题居中显示。tooltip触发条件为item，提示内容显示格式为{b}:{c}({d}%)，代表数据项名称、利润值、利润占比。图例设为垂直显示，右对齐series中饼图大小为网格的60%，data项记录了各系列手机的名称（name）和利润（value）步骤：

子任务2历年笔记本计算机不同价位销量堆叠柱状图绘制任务分析：某联想笔记本计算机专卖店，为了了解客户对各种价位的喜欢程度，梳理了2016年—2022年联想笔记本计算机各种价位销量情况，见表2-2-2。利用上面数据绘制堆叠水平柱状图，纵轴为年份，横轴为销量，同一年份不同价位的销售数据显示在同一个柱子中。图表显示标题、提示框、图例。

2、柱状图任务资讯柱状图一般用于表示类别数据的大小，用于数据之间的比较，适用于较小的数据集分析（1）基础柱状图将series参数中的type设置为bar就可以绘制柱状图在series参数中加上showBackground:true，可以为柱子设置背景色。在series参数中加上label:{show:true,position:top}，可在柱子上方显示刻度值。在xAxis中加上axisTick:{alignWithLabel:true}，可以设置坐标轴刻度与标签对齐。

2、柱状图任务资讯（2）聚合柱状图在一些场景中，横轴上每一类别可能有两个及两个以上维度，为了更直观地显示各维度信息，需要使用聚合柱状图来表示。聚合柱状图会在series参数中加入多个系列的数据，一般会设置legend图例，图例元素与系列个数一致。示例如下

2、柱状图任务资讯（3）水平柱状图要将垂直柱状图修改成水平柱状图，只需将xAxis、yAxis的内容相互交换。如果要显示柱子刻度值，需要将labe