寒假学习日报11
Apache EChartsTM 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(dataset)和一个“转换方法”(transform),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。
抽象地来说,数据转换是这样一种公式:outData = f(inputData)。f 是转换方法,例如:filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:
把数据分成多份用不同的饼图展现。
进行一些数据统计运算,并展示结果。
用某些数据可视化算法处理数据,并展示结果。
数据排序。
去除或直选择数据项。
除了图表外 Apache EChartsTM 中,提供了很多交互组件。例如:
图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline
下面以 数据区域缩放组件 dataZoom 为例,介绍如何加入这种组件。
数据区域缩放组件(dataZoom)介绍
『概览数据整体,按需关注数据细节』是数据可视化的基本交互需求。dataZoom 组件能够在直角坐标系(grid)、极坐标系(polar)中实现这一功能。
dataZoom 组件是对 数轴(axis) 进行『数据窗口缩放』『数据窗口平移』操作。
可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
dataZoom 组件可同时存在多个,起到共同控制的作用。控制同一个数轴的组件,会自动联动。下面例子中会详细说明。
dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。
数据过滤模式的设置不同,效果也不同,参见:dataZoom.filterMode。
dataZoom 的数据窗口范围的设置,目前支持两种形式:
百分比形式:参见 dataZoom.start 和 dataZoom.end。
绝对数值形式:参见 dataZoom.startValue 和 dataZoom.endValue。
dataZoom 组件现在支持几种子组件:
内置型数据区域缩放组件(dataZoomInside):内置于坐标系中。
滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条操作。
框选型数据区域缩放组件(dataZoomSelect):全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。