day20：Echarts02

三、异步数据加载和更新

四、在图表中加入交互组件

除了图表外ECharts 中，提供了很多交互组件。例如：图例组件legend、标题组件title、视觉映射组件visualMap、数据区域缩放组件dataZoom、时间线组件 timeline。

1. 数据区域缩放组件（dataZoom）

dataZoom组件是对 数轴（axis）进行『数据窗口缩放』『数据窗口平移』操作。

可以通过dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。dataZoom组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。

dataZoom的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。数据过滤模式的设置不同，效果也不同，参见：dataZoom.filterMode。

dataZoom的数据窗口范围的设置，目前支持两种形式：

百分比形式：参见dataZoom.start 和dataZoom.end。

绝对数值形式：参见dataZoom.startValue 和 dataZoom.endValue。

dataZoom组件现在支持几种子组件：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。

滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。

框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。

五、移动端自适应

ECharts工作在用户指定高宽的DOM节点（容器）中。ECharts的『组件』和『系列』都在这个DOM节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现DOM文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要ECharts 内部组件随着容器尺寸变化而变化的能力。为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似CSSMedia Query的自适应能力。

1.Echarts组件的定位和布局

定位方式：①left/right/top/bottom/width/height定位方式，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。

②center/ radius定位方式。

③横向（horizontal）和纵向（vertical）

2.Media Query

提供随着容器尺寸改变而改变的能力。

拖动右下角改变容器尺寸时，随着尺寸变化，legend和系列会自动改变布局位置和方式。

六、数据的视觉映射

数据可视化是数据到视觉元素的映射过程，ECharts的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』，此外，ECharts还提供了visualMap组件来提供通用的视觉映射。visualMap组件中可以使用的视觉元素有：图形类别（symbol）、图形大小（symbolSize）、颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）。

Echarts中的数据一般存放在series.data中，具体形式可能是线性表、树、图等，但都是dataItem的集合，每个数据项包含数据值value和其他信息。默认映射前两个维度，第一个维度映射到x轴，第二个维度映射到y轴，若想要把更多维度展现出来可以借助visualMap。

visualMap组件定义了把数据的哪个维度映射到什么视觉元素上。。

通过visualMap.type划分两种类型：continuous（连续型）和piecewise（分段型）。

其中，分段型visualMapPiecewise有三种模式：连续型数据平均分段，连续型数据自定义分段，离散数据（类别性数据）。