《数据可视化技术》 课件 10 电器产品营销数据异步加载和数据集管理

《数据可视化技术》课题10电器产品营销数据异步加载和数据集管理01准备活动点名、复习本次课学习内容、学习目标介绍学习内容任务：电器产品营销数据的可视化分析：当前电子商务普及，交易数据非常庞大。对电子商务数据通过可视化手段进行分析和图表展示，可以帮助销售人员改进销售手段和策略，提高销售量。本单元讲解异步数据加载、数据集管理、数据映射。任务1、ECharts异步加载数据、加载json数据任务2、dataset数据集管理学习目标1、知识（1）了解异步加载数据（2）掌握异步加载数据方法（3）理解数据集（4）掌握series.encode操作2、技能（1）能够使用Echarts异步加载数据（2）能够使用dataset进行数据集管理（3）能够使用series.encode映射数据3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施子任务1

ECharts异步加载数据、加载json数据任务分析：本任务的主要内容包括异步加载概念，jQuery加载文件方法，loading加载，使用异步加载数据开发ECharts项目。1．异步加载概念2．jQuery加载文件方法3．使用异步加载数据开发ECharts项目4．loading加载1．异步加载概念任务资讯异步数据加载就是在加载数据时仍然执行其他程序，不会导致其他程序等待加载数据完后才执行。一般对不够重要的、数据量较大的图表使用异步加载方式，这样才不会因为应用程序界面空白、卡顿而影响用户正常使用。默认情况下JavaScript是同步加载的，也就是JavaScript的加载是阻塞的，后面的元素要等待JavaScript加载完毕后才能再加载2．jQuery加载文件方法任务资讯jQuery的$.get()方法就是一种异步加载文件的方法。jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。$就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素。jquery中$.，例如$.post()，$.get()，$.ajax()等这些都是jquery这个对象的方法。$.get()方法使用HTTPGET请求从服务器加载数据。任务实施1、ECharts异步加载数据ECharts通常数据设置在setOption中，如果我们需要异步加载数据，可以配合jQuery等工具，在异步获取数据后通过setOption填入数据和配置项就行。创建json数据，名称为advertisement.json{“adv":[{"value":451,"name":"视频广告"},{"value":237,"name":"联盟广告"},{"value":159,"name":"邮件营销"},{"value":367,"name":"直接访问"},{"value":578,"name":"搜索引擎"}]}任务实施1、实施步骤步骤1：引入echarts.js、jquery.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：

$.get()异步加载方法步骤5：准备配置项任务实施任务实施(2)绘制饼图任务实施(3)绘制带有loading效果的Echarts如果异步加载需要一段时间，我们可以添加loading效果，ECharts默认有提供了一个简单的加载动画。只需要调用showLoading方法显示。数据加载完成后再调用hideLoading方法隐藏加载动画。任务实施代码如下：myChart.showLoading()用于开启loading效果，myChart.hideLoading()用于隐藏loading效果。

在文件不大、网速较快的情况下，文件加载没有延迟，loading效果则几乎看不到。这里使用alert()方法弹框让loading效果暂停，方便观察。子任务2

dataset数据集管理任务分析：本任务的主要内容数据集管理，Echarts使用dataset管理数据。dataset组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。1．使用二维数组数据集绘图2．使用数组嵌套对象的数据集绘图3．使用seriesLayoutBy映射数据4．使用encode映射数据任务资讯1、使用二维数组方式的dataset数据集来加载数据任务资讯2、使用数组嵌套对象方式的dataset数据集来加载数据数组嵌套Object对象也是一种常见的数据存储格式，使用[{},…，{}]形式来存储数据。数组嵌套对象格式数据集绘制的图形效果与二维数组数据集绘制的效果一样。任务资讯3、使用seriesLayoutBy映射数据可以在配置项中将数据映射到图形中。可以使用series.seriesLayoutBy属性来配置dataset是列（column）还是行（row）映射为图形系列（series），默认是按照列（column）来映射。以下实例将通过seriesLayoutBy属性来配置数据是使用列显示还是按行显示。任务资讯4、使用series.encode映射数据encode声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如'x','y','tooltip'等，冒号右边是数据中的维度名（string格式）或者维度的序号（number格式，从0开始计数），可以指定一个或多个维度（使用数组）。通常情况下，数据集中不一定用上所有列，按需求写入encode即可。任务实施任务分析：某电视机网络销售方近几年营销推广主要依赖自媒体、搜索引擎、视频广告、APP广告这几种方式，下面分别统计了2020年至2022年这几种渠道的销量。见表3-1-1。任务实施步骤：步骤1：引入echarts.js和jquery.min.js两个js文件步骤2：加载外部JSON数据文件，成功后数据放入data变量中。步骤3：使用dataset.source参数设置数据集，通过data.market指定加载的文件数据。步骤4：series中定义了3个系列，分别对应dataset中的每一列，每个系列均指定了图表类型为平滑折线图，显示数值标签。任务实施

绘制线图03整合活动总结、知识点梳理学习总结拓展任务拓展：加载外部json数据并使用series.encode方式加载数据集，绘制“收入-预期寿命”散点图(1)访问/static/js/life-exp