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

《数据可视化技术》单元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进行配置，代码如