《数据可视化技术》 课件 08 应用非直角坐标轴图描绘手机经营情况

《数据可视化技术》单元8应用非直角坐标轴图描绘手机经营情况项目介绍本次课继续学习项目二：数码产品销售数据ECharts可视化数码产品主要包括计算机、通信和消费电子产品。对数码产品销售数据进行分析和可视化展示，有助于相关人员了解各种产品销售情况，了解哪些是畅销产品、哪些是冷门产品，帮助改进营销和投资。本项目使用ECharts技术完成对数码产品销售数据的分析与可视化。01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务三应用非直角坐标轴图描绘手机经营状况为了分析不同型号手机产品销售利润占比情况、销售目标达成情况、影响手机销量的因素、手机产品关键词搜索热度等，需要灵活应用饼图、仪表盘、雷达图、词云图来绘制图形，帮助商家总结经营情况，做出分析和判断，改进营销策略。任务分解：子任务1华为各系列手机利润占比情况饼图绘制（饼图）子任务2某华为手机天猫专营店年度销量目标达成情况仪表盘绘制（仪表盘图）子任务3手机购买因素分析雷达图绘制（雷达图）子任务4手机产品搜索关键词热度的词云图绘制（词云图）学习目标1、知识（1）掌握饼图、仪表盘图、雷达图、词云图的绘制（2）理解饼图、仪表盘图、雷达图、词云图的用途2、技能（1）能够绘制饼图、仪表盘图、雷达图、词云图3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施子任务1华为各系列手机利润占比情况饼图绘制（饼图）任务分析：某华为手机天猫专营店对2022年华为各系列手机销售利润情况进行了统计，包括Mate系列、P系列、Nova系列、畅享系列的销售利润，见表2-3-1利用表2-3-1数据绘制饼图，显示标题、图例，饼图各扇区代表各种型号手机的销售利润，鼠标移入饼图显示各项名称、利润值及利润占比。1、饼图任务资讯饼图是一种用于展示各项数据的大小与各项数据总和的比例的基本图形，通过扇形或圆环的大小来反映各项占总和的比例的大小。ECharts绘制饼图，需要将ECharts中series的type设置为pie。（1）基础饼图基础饼图通过扇形的大小来表示各项占比。基础饼图一般会设置标题、提示框、图例、系列等，其中提示框触发条件不再是轴（axis），而是项（item）。饼图中每一个扇形代表一项数据，对应图例中的每一项值。系列中data各项以字典方式存储数据。基础饼图的ECharts代码如下任务资讯（2）环形图环形图通过圆环的大小来反映各项所占比例的大小。要创建环形图，只需要在series参数中加上radius，从而规定内环、外环直径即可。环形图的ECharts代码如下1、饼图任务实施ECharts最基本的代码结构引入js文件,DOM容器,初始化对象,设置optionOption设置：步骤：title设置了标题居中显示。tooltip触发条件为item，提示内容显示格式为{b}:{c}({d}%)，代表数据项名称、利润值、利润占比。图例设为垂直显示，右对齐series中饼图大小为网格的60%，data项记录了各系列手机的名称（name）和利润（value）子任务2

某华为手机天猫专营店年度销量目标达成情况仪表盘绘制任务分析：某华为手机天猫专营店2022年定下的销售额目标是2000万元，实际营销达到2006.6931万元，定下的销售利润目标是200万元，实际利润为188.5456万元。请用仪表盘展示销售额和利润的目标达成度，两个目标达成度制作到一个仪表盘中任务资讯1、仪表盘仪表盘是用于表示某事件进度状态的一种图形，一般用于强调或重点展示状态值。ECharts绘制仪表盘，需要将series参数中type设为gauge。基础仪表盘代码如下任务实施实现步骤Echarts最基本的代码结构引入js文件，DOM容器，初始化对象，准备option，设置optionOption相关配置tooltip提示信息显示了系列名称、数据项名称和数据值series中有两个系列，分别对应两个目标达成度的数据信息。type为gauge，表示仪表盘图；radius为80%表示仪表盘半径是原始大小的80%，默认是75%；title为系列标题设置参数，fontSize可设置字体大小，offsetCenter可设置文字位置，位置使用偏离中心点的百分比来表示；detail为数值设置参数，formatter设置为{value}%，即数值显示格式，同样可以设置文字大小和位置；data为数据项的值和名称。子任务3

手机购买因素分析雷达图绘制任务分析：某手机专卖店对魅族、华为、小米3种品牌的手机购买因素进行了分析，主要对比价格、功能、外观、稳定性、安全性等几种因素，总结得到的结果见表2-3-2。绘制雷达图，描绘3种品牌手机购买行为受价格、功能、外观、稳定性、安全性等几种因素影响的程度任务资讯1、雷达图雷达图用于描述不同单位事物多个特性的表现差异，从圆心开始的多条轴线上显示多变量数据，主要描述多项指标的数值，以及对应的占比情况。ECharts绘制雷达图，需要将series参数中type设为radar。基础雷达图代码如下：任务实施实现步骤Echarts最基本的代码结构引入js文件，DOM容器，初始化对象，准备option，设置optionOption相关配置legend设置了3项元素的图例，与后面series中data的name值一致radar参数设置了5个因素的字体外观、雷达图特征指标的名称和数值范围series指定了图表类型，存放了3种品牌手机的指标数据。子任务4

手机产品搜索关键词热度的词云图绘制任务分析：某手机网络销售平台对最近一个月用户搜索手机产品的关键词进行统计，得到搜索关键词排行榜，频率最高的25个词语见表2-3-3请用表2-3-3关键词排行榜数据绘制词云图，词云的形状为星形。任务资讯1、词云图词云图是对文本中出现频率较高的词语予以突出显示的图形，词语频率越高，字体越大，显示越突出。词云图可以让浏览者快速感知突出的词语，从而抓住重点，理解主旨。使用ECharts创建词云图，需要加载echarts-wordcloud.js插件，即在引入echarts.js后，还得引入echarts-wordcloud.js，引入代码如下词云图代码如下任务实施实现步骤Echarts最基本的代码结构引入js文件，DOM容器，初始化对象，准备option，设置optionOption相关配置首先定义变量words数组，用于存储关键词搜