项目四电商数据可视化项目优化设计数据可视化技术与应用25课.pptxVIP

主讲教师：王晓项目四：电商数据可视化项目优化设计任务5：实现异步数据加载与显示加载动画数据可视化技术与应用

0102目录CONTENTS异步数据加载显示加载动画

异步数据加载Echarts中数据一般是在初始化后的setOption中直接填入的，但是很多时候数据需要使用异步?模式进行数据加载。如果数据加载时间较长，一个空的坐标轴放在画布上会让用户怀疑是否运行错误，此时需要使用一个loading动画来提示用户数据正在加载。?

ECharts中设置异步数据加载ECharts中实现异步数据的加载的操作其实并不困难，在初始化图表后的任何时间内，都可以通过使用jQuery等工具实现异步数据加载，并通过setOption填入数据和配置项。还可以通过先设置完图表样式，显示一个空的直角坐标轴后，再获取数据、填入数据，并显示图表的方式实现异步数据的加载。异步加载各专业人数统计数据并绘制饼图，如图所示。

ECharts中设置异步数据加载当异步加载数据时，需要配置Google浏览器以支持AJAX请求，具体操作如下。（1）右键单击“GoogleChrome”快捷方式图标，在弹出的快捷菜单中选择最下面的“属性”菜单项。（2）在弹出的“GoogleChrome属性”对话框中，在其中的“目标”文本框中添加“--allow-file-access-from-files”内容，再单击“确定”按钮，如图所示。（3）打开Google浏览器。（4）将网页文件拖放到打开的Google浏览器中。

ECharts中设置异步数据加载ECharts默认提供了一个简单的加载动画，只需要在数据加载前，调用showLoading方法显示加载动画，在数据加载完成后，再调用hideLoading方法隐藏加载的动画即可。当然，也可以根据需要使用showLoading方法自定义加载动画。异步加载某学院各专业男女生统计数据并绘制双柱状图，如图所示。

ECharts中设置异步数据加载在自定义数据加载动画中，可根据需要定义提示的文字、文字的样式、effect（可选为:spinbarringwhirlingdynamicLinebubble?，必须引入echarts27-all.js才可设置effect属性）、自定义的数据加载动画蒙板颜色等属性。左图为完成自定义的数据加载动画后得到的双柱状图，其数据加载动画效果如右图所示。

上机练习背景设定：假设你是一家知名电商平台的前端开发工程师，负责设计并实现一个实时销售数据可视化系统。该系统需要从后端接口异步获取最近一小时内各商品类别的销售数据，并在网页上动态展示这些数据，同时在数据加载过程中显示吸引用户的加载动画。为了保证用户体验，数据应每隔一分钟自动更新一次，并且在首次加载及每次更新数据时均展示加载动画。练习目标：1.使用Ajax实现异步数据获取。2.利用ECharts库创建柱状图展示商品类别与对应销售额。3.配置ECharts的加载动画效果。4.设计数据更新逻辑，实现数据的定时自动刷新。

谢谢观看！数据可视化技术与应用