《数据可视化技术》 课件 05 Echarts基本组件的使用（一）（二）

《数据可视化技术》单元5Echarts基本组件的使用（一）项目介绍本次课开始学习项目二：数码产品销售数据ECharts可视化数码产品主要包括计算机、通信和消费电子产品。对数码产品销售数据进行分析和可视化展示，有助于相关人员了解各种产品销售情况，了解哪些是畅销产品、哪些是冷门产品，帮助改进营销和投资。本项目使用ECharts技术完成对数码产品销售数据的分析与可视化。01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务一

使用基本组件绘制数码产品销量图店铺商家为了直观地查看各种数码产品的销量情况、进货量与销量对比情况，可以借助ECharts开发数据图表，直观地展示数据统计结果要使用ECharts进行数据可视化，需要搭建ECharts开发环境，设置ECharts常用组件。本任务将绘制数码产品进货量与销量对比图、2017年—2020年各品牌数码产品销量情况对比图任务分解：子任务1搭建ECharts开发环境子任务2绘制数码产品进货量与销量对比图（柱状图）子任务3绘制2017年—2020年各品牌数码产品销量情况对比图（子图：柱状图）学习目标1、知识（1）了解Echarts开发环境（2）掌握Echarts标题、坐标轴主要参数设置（3）了解Echarts数据系列的设置和使用（4）掌握Echarts图例的设置2、技能（1）能够搭建Echarts开发环境（2）能够使用Echarts图表中的标题、坐标轴、数据系列、图例等组件3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施子任务1搭建ECharts开发环境任务分析：本任务的主要内容包括下载并安装ECharts，安装开发工具HBuilderX，使用HBuilderX开发ECharts项目。1．下载并安装ECharts2．安装开发工具HBuilderX3．使用HBuilderX开发ECharts项目1．Echarts简介任务资讯ECharts，一个纯Javascript的图表库，依赖轻量级的Canvas类库Zrender，借助Echarts可以提供基于Web的可视化图表兼容当前绝大部分浏览器（IE8月／10/11

,

Chrome,Firefox,Safari等）官方提供了折线图、柱状图、饼图、散点图、地图、雷达图、K线圈、箱型图、热力图、关系图、矩形树图、平行坐标、桑基图、漏斗图、仪表盘等多种图表1．Echarts简介任务资讯ECharts，一个纯Javascript的图表库，依赖轻量级的Canvas类库Zrender，借助Echarts可以提供基于Web的可视化图表兼容当前绝大部分浏览器（IE8月／10/11

,

Chrome,Firefox,Safari等）官方提供了折线图、柱状图、饼图、散点图、地图、雷达图、K线圈、箱型图、热力图、关系图、矩形树图、平行坐标、桑基图、漏斗图、仪表盘等多种图表2、Echarts官网Echarts官网：/zh/index.html下载echarts插件（https://echarts.apache.org/zh/download.html）任务资讯2、安装开发工具HhuilderVSCode任务资讯3、Echarts开发流程步骤1：引入echarts.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象任务资讯3、第一幅Echarts可视化图步骤：1、引入echarts.js文件2、准备一个呈现图标的盒子（div）3、初始化echarts实例对象4、准备配置项5、将配置项设置给echarts实例对象任务资讯1、下载echarts插件2、安装hbuilder或者vscode3、第一幅可视化图任务实施子任务2绘制数码产品进货量与销量对比图（柱状图）任务分析：某数码专营店专营耳机、音响，其中无线蓝牙耳机销量一直最好。该数码专营店2022年上半年无线蓝牙耳机的进货量和销量数据，见表2-1-1。利用上面数据绘制聚合柱状图，横轴为月份，纵轴为数量，显示标题、图例任务资讯（1）标题标题组件通过title进行配置，代码如下3、Echarts组件3、Echarts组件任务资讯（2）坐标轴常见的坐标轴是二维直角坐标轴，横轴（xAxis，即x轴）和纵轴（yAxis，即y轴）两个组件常被使用，代码如下：任务资讯（3）数据系列数据系列是数据的容器，一个图表可以包含多个数据系列，多个系列放在数组结构中。每个系列由大括号组成，包含若干键值对。数据系列通过series进行配置，代码如下：3、Echarts组件任务资讯（4）图例图例组件通过legend进行配置，代码如下：3、Echarts组件任务实施实现步骤Echarts最基本的代码结构引入js文件，DOM容器，初始化对象，准备option，设置optionOption相关配置标题坐标轴：x轴，y轴数据系列图例03整合活动总结、知识点梳理学习总结拓展：1、分别安装Pycharm和Hbuilder(或VScode)，在相应编辑器中编辑Echarts，实现下图效果拓展任务《数据可视化技术》单元6Echarts基本组件的使用（二）项目介绍本次课开始学习项目二：数码产品销售数据ECharts可视化数码产品主要包括计算机、通信和消费电子产品。对数码产品销售数据进行分析和可视化展示，有助于相关人员了解各种产品销售情况，了解哪些是畅销产品、哪些是冷门产品，帮助改进营销和投资。本项目使用ECharts技术完成对数码产品销售数据的分析与可视化。01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务一

使用基本组件绘制数码产品销量图店铺商家为了直观地查看各种数码产品的销量情况、进货量与销量对比情况，可以借助ECharts开发数据图表，直观地展示数据统计结果要使用ECharts进行数据可视化，需要搭建ECharts开发环境，设置ECharts常用组件。本任务将绘制数码产品进货量与销量对比图、2017年—2020年各品牌数码产品销量情况对比图任务分解：子任务1搭建ECharts开发环境（已完成）子任务2绘制数码产品进货量与销量对比图(部分完成）子任务3绘制2017年—2020年各品牌数码产品销量情况对比图（

未完成）学习目标1、知识（1）掌握提示框、工具栏的设置和使用（2）掌握Echarts时间轴、数据缩放区域、网格的设置2、技能（1）能够使用Echarts图表中的提示框、工具栏（2）能够使用时间轴、数据缩放区域、网格等组件3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施子任务2-2绘制数码产品进货量与销量对比图（柱状图）任务分析：上节课已经完成了数码产品进货量与销量对比图基础部分的配置，本任务将继续完善，添加提示框、工具栏、数据缩放区域、网格等组件。1、配置项任务资讯（1）提示框提示框组件通过tooltip进行配置，代码如下：1、配置项任务资讯（2）工具栏工具栏组件通过toolbox进行配置，代码如下1、配置项任务资讯（3）数据缩放区域数据区域缩放可以实现区域放大、查看数据图表细节。前面工具栏组件提供了数据缩放按钮，可以通过该按钮实现区域的放大和还原。除此之外，也可以利用dataZoom组件，通过滑动条或鼠标滚轮实现缩放数据区域缩放组件通过dataZoom进行配置，代码如下1、配置项任务资讯（3）数据缩放区域1、配置项任务资讯（3）数据缩放区域下面看一个具体的dataZoom可视化示例，代码如下图2-1-10中，可以随意拖到x轴或y轴滑动条的两端，实现窗口数据缩放。由于x轴的filterMode为filter，y轴的filterMode为empty，则x轴作为主轴，x的缩放会影响y轴数据，y轴作为辅助轴，y轴的缩放不会影响x轴的数据1、配置项任务资讯（4）时间轴时间轴（timeline）组件提供了在多个EChartsoption间进行切换、播放等操作的功能。时间轴和其他场景有些不同，它需要操作多个option。可以将ECharts传统的option称为原子option，包含多个原子option的option称为复合option任务实施实现步骤Echarts最基本的代码结构引入js文件，DOM容器，初始化对象，准备option，设置optionOption相关配置工具栏提示框网格数据区域缩放子任务3绘制2017年—2020年各品牌数码产品销量情况对比图任务分析：某通信产品店主要销售数码产品，蓝牙/无线耳机销售是其主打业务。为了更好地了解近几年各种品牌耳机销量情况，以便改进营销策略，该通信产品店整理了2017年至2020年主要品牌耳机的销量数据，见表2-1-2。利用上面数据在一个ECharts实例对象中绘制4个子图，分别显示2017年—2020年主要品牌的销售数据，子图横轴为各品牌耳机名称，纵轴为年度销量。通过子图完成各年度销量对比。1、配置项任务资讯（5）网格网格组件通过grid进行配置，代码如下任务实施实现步骤Echarts最基本的代码结构引入js文件，