ECharts transform数据转换和dataZoom在项目中使用
黎燃 人气:0transform 进行数据转换
数据转换是这样一个公式：outData=f（inputData）。F是转换方法，例如filter、sort、region、boxplot、cluster、aggregate（todo）等。有了数据转换功能，我们至少可以做到以下几点： 将数据分成多个部分，并在不同的饼图中显示它们。 执行一些数据统计操作并显示结果。 使用一些数据可视化算法来处理数据并显示结果。 数据排序。 删除或直接选择数据项。
series: [{
type: 'pie', radius: 50, center: ['25%', '50%'],
// 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
// 2011 年那个 "filter" transform 的结果。
datasetIndex: 1
}, {
type: 'pie', radius: 50, center: ['50%', '50%'],
datasetIndex: 2
}, {
type: 'pie', radius: 50, center: ['75%', '50%'],
datasetIndex: 3
}]
};
在大多数情况下，转换只需要输出一个数据。然而，也有一些场景需要输出多个数据，每个数据可以由不同的系列或数据集使用。 例如，在内置的“boxplot”转换中，除了boxplot系列所需的数据外，还将生成异常值，并可以使用散点图系列进行显示。例如 我们提供配置数据集FromTransformResult，例如：
option: {
dataset: [{
source: [ ... ] // 原始数据
}, {
// 几个 transform 被声明成 array ，他们构成了一个链，
// 前一个 transform 的输出是后一个 transform 的输入。
transform: [{
type: 'filter',
config: { dimension: 'Product', value: 'Tofu' }
}, {
type: 'sort',
config: { dimension: 'Year', order: 'desc' }
}]
}],
series: {
type: 'pie',
// 这个系列引用上述 transform 的结果。
datasetIndex: 1
}
}
当使用转换时，有时我们将无法显示结果，而且我们不知道哪里出了问题。因此，这里提供了一个配置项转换。打印方便调试。此配置项仅在开发环境中生效。
option = {
dataset: [{
source: [ ... ]
}, {
transform: {
type: 'filter',
config: { ... }
print: true
}
}],
...
}
配置为 true 后， transform 的结果，会被 console.log 打印出来。
数据转换器“排序”还具有一些附加功能： 可以将多个维度一起排序。请参见下面的示例。 整理如下： 默认值是按数值排序。其中，“可转换为数值的字符串”也被转换为数值，并与其他数值一起按大小排序。 其他“无法转换为数值的字符串”也可以按字符串排序。此功能在这种情况下很有用：具有相同标记的数据项被分组在一起，特别是当多个维度被排序在一起时。
option = {
dataset: [{
dimensions: ['name', 'age', 'profession', 'score', 'date'],
source: [
[' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
[' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
[' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
[' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
[' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
]
}, {
transform: {
type: 'sort',
config: [
// 对两个维度按声明的优先级分别排序。
{ dimension: 'profession', order: 'desc' },
{ dimension: 'score', order: 'desc' }
]
}
}],
series: {
type: 'bar',
datasetIndex: 1
},
...
};
当对“数值和可以转换为数值的字符串”和“不能转换为数值”进行排序时，或者当它们与“其他类型的值”进行比较时，它们不知道如何比较自己。然后我们将“后者”称为“不可比”，并可以设置不可比：'min'|'max'，以指定“不可比较”在该比较中是最大还是最小，以便它们可以产生比较结果。例如，此设置的目的是确定空值（如null、undefined、NaN、“”、“-”）是否位于排序的开始或结束。
type SortTransform = {
type: 'filter';
config: OrderExpression | OrderExpression[];
};
type OrderExpression = {
dimension: DimensionName | DimensionIndex;
order: 'asc' | 'desc';
incomparable?: 'min' | 'max';
parser?: 'time' | 'trim' | 'number';
};
type DimensionName = string;
type DimensionIndex = number;
filter：可以使用'time'|'trim'|'number'，就像在数据转换器“filter”中一样。 如果要对时间进行排序（例如，值是JSDate实例或时间字符串，如“2012-03-12 11:13:54”），我们需要声明解析器：“time”。 如果我们需要对后缀值进行排序（例如“33%”、“16px”），我们需要声明parser:'number'。
dataZoom
dataZoom组件用于在轴上执行“数据窗口缩放”和“数据窗口平移”操作。 可以使用dataZoom xAxisIndex或dataZoom YAxisIndex指定dataZoom控件的一个或多个数字轴。 同时可以有多个dataZoom组件，这些组件起到共同控制的作用。控制相同编号轴的组件将自动链接。下面的示例将详细解释。 dataZoom的工作原理是通过“数据过滤”来达到“数据窗口缩放”的效果。 数据过滤模式的不同设置具有不同的效果。dataZoom。过滤器模式。 目前，dataZoom支持两种类型的数据窗口范围设置： 百分比形式：dataZoomStart和dataZoom.end。 绝对数字形式：dataZoomStartValue和dataZoom.endValue。
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
}
],
series: [
{
type: 'scatter', // 这是个『散点图』
itemStyle: {
opacity: 0.8
},
symbolSize: function (val) {
return val[2] * 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}
除了图表之外，ApacheEChartsTM还提供了许多交互式组件。例如： 图例组件图例、标题组件、可视化映射组件visualMap、数据区域缩放组件dataZoom、时间轴组件。 除了图表之外，ApacheEChartsTM还提供了许多交互式组件。例如： 图例组件图例、标题组件、可视化映射组件visualMap、数据区域缩放组件dataZoom、时间轴组件。
加载全部内容