任务单12：Echarts交互组件和响应式的使用.docxVIP

PAGE PAGE 2 任务单12：Echarts交互组件和响应式的使用 §任务要求 1、ECharts 交互组件的使用 ECharts 提供了很多交互组件，例如：图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline等。 下面将使用视觉映射组件 visualMap、数据区域缩放组件 dataZoom。 （1）使用visualMap实现视觉通道的映射 visualMap组件可以进行视觉通道的映射，包括颜色、尺寸 视觉元素可以是： symbol: 图元的图形类别。 symbolSize: 图元的大小。 color: 图元的颜色。 colorAlpha: 图元的颜色的透明度。 opacity: 图元以及其附属物（如文字标签）的透明度。 colorLightness: 颜色的明暗度。 colorSaturation: 颜色的饱和度。 colorHue: 颜色的色调。 visualMap 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。 使用visualMap实现视觉通道的映射实例，如下图所示。水平柱状图y轴表示产品，x轴表示数量，当鼠标移入水平柱子，下方视觉通道显示相应的评分信息。 （2）使用dataZoom交互组件进行缩放 dataZoom 组件可以实现通过x轴、y轴缩放栏