版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
《数据可视化技术》课题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
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024届陕西省西北大学附中高三第12次模拟(压轴卷)数学试题试卷
- 5年中考3年模拟试卷初中道德与法治八年级下册04专项素养综合全练(四)
- 人教版一年级下册音乐
- 2024-2025学年专题16.3 电阻-九年级物理人教版含答案
- DB11-T 1962-2022 食用林产品质量安全追溯元数据
- 创意产业园施工合同样本
- 体检中心连锁店装修合同
- 主题公园涂料翻新服务合同
- 保健按摩店装修延期备忘录
- 个性化攀岩墙装修合同模板
- 英语调查问卷及英文结果分析报告经典权威模板
- 河道土石方开挖、河堤填筑施工方案
- PANTONE国际色卡CMYK色值对照表
- 电子商务基础与实务PPT课件
- 有限元填空选择题及答案3页
- 财务报表模板[全套]
- SY4205-2019石油天然气建设工程施工质量验收规范自动化仪表检验批表格
- 附录:常用液压与气动元件图形符号
- 国家重点研发计划课题任务书模板
- 精益生产评价打分表
- 史上最全的线材基础知识讲解
评论
0/150
提交评论