《数据可视化技术》 课件 11使用视觉通道和布局技术对电器销售数据可视化、12电器产品销售Dashboard可视化制作.pptx

《数据可视化技术》课题11使用视觉通道和布局技术对电器销售数据可视化使用

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

学习内容任务：电器产品营销数据的可视化分析：电器产品种类繁多，交易数据量大，通过可视化手段对其销售数据进行分析和图表展示，可以帮助销售人员改进销售手段和策略，提高销售量。本单元交互组件visualMap、定位和布局，自动布局技术。任务1、使用visualMap实现视觉通道的映射任务2、定位和布局任务3、自动布局技术

学习目标1、知识（1）掌握visualMap（2）了解定位布局的方式（3）掌握自适应布局技术2、技能（1）能够使用Echarts交互组件（2）能够使用ECharts响应式对组件的定位和布局3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力

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

任务分析1、教师讲解VisualMap参数定位和布局方法2、学生讨论（1）如何实现交互组件（2）如何实现响应式布局3、明确任务（1）使用visualMap实现视觉通道的映射（2）定位和布局（3）自动布局技术

任务资讯1、ECharts交互组件的使用ECharts提供了很多交互组件，例如：图例组件legend、标题组件title、视觉映射组件visualMap、数据区域缩放组件dataZoom、时间线组件timeline等。下面将使用视觉映射组件visualMap、数据区域缩放组件dataZoom。（1）使用visualMap实现视觉通道的映射visualMap组件可以进行视觉通道的映射，包括颜色、尺寸等外观元素的改变，视觉元素主要有：? symbol:图元的图形类别。? symbolSize:图元的大小。? color:图元的颜色。

任务实施? colorAlpha:图元的颜色的透明度。? opacity:图元以及其附属物（如文字标签）的透明度。? colorLightness:颜色的明暗度。? colorSaturation:颜色的饱和度。? colorHue:颜色的色调。visualMap组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。映射实例，如下图所示。水平柱状图y轴表示产品，x轴表示数量，最下面为视觉通道，表示产品的评分，评分越高的柱子颜色越红，评分越低的柱子颜色越浅当鼠标移入水平柱子，下方视觉通道显示相应的评分信息。

子任务1使用visualMap组件完成下面图表制作

子任务1如果visualMap的type改为piecewise，那么视觉通道将呈现分段的效果，不同段的颜色对应不同水平柱子的颜色，表示不同的评分区间。单击分段，可以打开或关闭对应评分区间的水平柱子。如下图所示：

任务资讯2、定位和布局

任务资讯2、定位和布局

任务资讯3、自适应布局技术ECharts在设置好DIV容器大小后，不再改变其大小。浏览时即使浏览器缩放宽度小于容器大小，图表也不会发生变化，部分区域会被遮挡，为了解决这个问题，ECharts运用resize()方法和MediaQuery方法，实现自适应。（1）resize()方法ECharts可以使用resize()方法为图表设置特定的大小，指定宽度和高度，实现图表大小不等于容器大小的效果。如果在创建DIV容器时，没有指定大小或通过样式指定了大小（如divid=main/div），在后面都可以重设图表大小，方法为myChart.resize({width:800,height:600})。

任务资讯3、自适应布局技术在一些场景中，容器大小改变时，图表大小也需要相应地改变，比如：图表容器设为宽度100%，高度设为500px，当浏览器宽度改变时，想始终保持图表宽度是页面的100%，不会因为容器宽度变小而看不到一部分图表的内容。这种情况就需要监听页面的resize事件，获取浏览器大小改变的事件，然后调用ECharts实例的resize方法改变图表的大小，方法代码如下：

子任务3实施实例如下：

子任务3实施（2）MediaQuery方法为了自适应移动端尺寸大小，自动改变图形布局，可以使用MediaQuery方法。MediaQuery提供了随着容器尺寸改变而改变的能力。下面举例说明，

子任务3实施注意：（1）关于query。每个query类似于这样：{minWidth:200,maxHeight:300,minAspectRatio:1.3}现在支持三个属性：width、height、aspectRatio（长宽比）。每个属性都可以加上min或max前缀。比如，minWi