《数据可视化技术》 课件 09 使用动态柱状图描绘各品牌手机销售、10 电器产品营销数据异步加载和数据集管理.pptx

《数据可视化技术》单元9使用动态柱状图描绘各品牌手机销售

项目介绍项目二：数码产品销售数据ECharts可视化数码产品主要包括计算机、通信和消费电子产品。对数码产品销售数据进行分析和可视化展示，有助于相关人员了解各种产品销售情况，了解哪些是畅销产品、哪些是冷门产品，帮助改进营销和投资。本项目使用ECharts技术完成对数码产品销售数据的分析与可视化。任务1使用基本组件绘制数码产品销量图（已完成）任务2应用直角坐标轴图描绘计算机销量情况（已完成）任务3应用非直角坐标轴图描绘手机经营状况（已完成）任务4使用动态柱状图描绘各品牌手机近期销量

01准备活动点名、复习本次课学习内容、学习目标介绍

学习内容任务四使用动态柱状图描绘各品牌手机近期销量有时候为了更加直观地描述业务发展情况，需要根据不同的日期（年份、季度、月份、周、日等）动态显示数据及其变化过程，这时可制作动态数据图表，其中常见的是动态数据柱状图。本任务需要分析近几年各品牌手机销量情况，并用水平条柱动态展示数据及其变化过程，从而对比分析销量增长或降低情况，了解各种品牌手机销量排名，以及随时间变化的发展趋势。任务分解：子任务1基础动态柱状图子任务2绘制各品牌手机近期销量动态排序柱状图

学习目标1、知识（1）掌握基础动态图表的绘制（2）掌握动态排序柱状图的绘制2、技能（1）能够绘制基础动态图表和动态排序柱状图3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力

02发展活动任务分析、任务资讯、演示讲解、任务实施

子任务1绘制各品牌手机近期销量动态排序柱状图任务分析：某手机专营店对2021年各种品牌手机各个月份销量进行了统计，结果见表2-4-1。利用表2-4-1数据绘制动态排序柱状图，首先显示2021年各种品牌手机1月份销量排序柱状图，然后逐步显示后续月份销量情况，每个月份数据在显示时有停留，动画过渡流畅

1．基础动态图表任务资讯ECharts要实现动画非常容易，只需要赋予option参数不同的数据，并使用setOption更新即可。通常情况下用户不需要设置如何使用动画，只需要更新数据，ECharts就会找出跟上一次数据之间的区别，自动应用最合适的过渡动画。要设置周期性更新数据，可以使用setInterval方法。setInterval是一个实现定时调用的方法，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，直到clearInterval被调用或窗口被关闭。语法格式如下：另外要在指定的时间后调用函数或计算表达式，可以使用setTimeout()。其语法格式如下

1．基础动态图表任务资讯简单的基础动态图表主要代码如下

2．动态排序柱状图任务资讯动态排序柱状图是一种展示数据随时间变化而变化的图表，ECharts从版本5开始提供内置支持。动态排序柱状图通常是横向的柱条，也可以使用纵向的柱条，调换x轴和y轴的设置即可动态排序柱状图通常会使用一些与动态数据相关的参数，常见参数如下realtimeSort：通常设为true，表示开启该系列的动态排序效果。yAxis.inverse：通常设为true，表示y轴从下往上是从小到大的排列。yAxis.animationDuration：建议设为300，表示第一次柱条排序动画的时长，单位为毫秒yAxis.animationDurationUpdate：建议设为300，表示第一次之后柱条排序动画的时长，单位为毫秒。yAxis.max：如果想只显示前n名，将yAxis.max设为n-1，否则显示所有柱条。xAxis.max：建议设为dataMax，表示用数据的最大值作为x轴最大值，视觉效果更好。series.label.valueAnimation：如果想要实时改变标签，需要将此参数设为true。animationDuration：动画持续时间，如果设为0，表示第一份数据不需要从0开始动画（如果希望从0开始则设为和animationDurationUpdate相同的值）。animationDurationUpdate：建议设为3000，单位为毫秒，表示每次更新动画的时长，这一数值应与调用setOption改变数据的频率值相同，即以animationDurationUpdate的频率调用setInterval更新数据值。

2．动态排序柱状图任务资讯一个简单的动态排序柱状图，代码如下

任务实施ECharts最基本的代码结构引入js文件,DOM容器,初始化对象,设置optionOption设置：步骤：title设置了标题居中显示。toolti