寒假学习日报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中。

原文地址:https://www.cnblogs.com/hhw12345/p/14908725.html