parallel
平行坐标系介绍
平行坐标系（Parallel Coordinates） 是一种常用的可视化高维数据的图表。
配置方式概要
『平行坐标系』的 option 基本配置如下例：
option = {
parallelAxis: [ // 这是一个个『坐标轴』的定义
{dim: 0, name: schema[0].text}, // 每个『坐标轴』有个 'dim' 属性，表示坐标轴的维度号。
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // 坐标轴也可以支持类别型数据
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
}
],
parallel: { // 这是『坐标系』的定义
left: '5%', // 平行坐标系的位置设置
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // 『坐标轴』的公有属性可以配置在这里避免重复书写
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // 这里三个系列共用一个平行坐标系
{
name: '北京',
type: 'parallel', // 这个系列类型是 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
...
]
},
{
name: '上海',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
...
]
},
{
name: '广州',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
...
]
}
]
};
需要涉及到三个组件：parallel、parallelAxis、series-parallel
parallel
这个配置项是平行坐标系的『坐标系』本身。一个系列（series）或多个系列（如上图中的『北京』、『上海』、『广州』分别各是一个系列）可以共用这个『坐标系』。
和其他坐标系一样，坐标系也可以创建多个。
位置设置，也是放在这里进行。
parallelAxis
这个是『坐标系』中的坐标轴的配置。自然，需要有多个坐标轴。
其中有 parallelAxis.parallelIndex 属性，指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。
series-parallel
这个是『系列』的定义。系列被画到『坐标系』上。
其中有 series-parallel.parallelIndex 属性，指定使用哪个『坐标系』。默认使用第一个『坐标系』。
配置注意和最佳实践
配置多个 parallelAxis 时，有些值一样的属性，如果书写多遍则比较繁琐，那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前，parallelAxisDefault 里的配置项，会分别融合进 parallelAxis，形成最终的坐标轴的配置。
- parallel.zlevel: 所有图形的 zlevel 值。
- parallel.z: 组件的所有图形的z值。控制图形的前后顺序。
- parallel.left: parallel 组件离容器左侧的距离。
- parallel.top: parallel 组件离容器上侧的距离。
- parallel.right: parallel 组件离容器右侧的距离。
- parallel.bottom: parallel 组件离容器下侧的距离。
- parallel.width: parallel 组件的宽度。默认自适应。
- parallel.height: parallel 组件的高度。默认自适应。
- parallel.layout: 'horizontal'
布局方式，可选值为： 'horizontal'：水平排布各个坐标轴。 'vertical'：竖直排布各个坐标轴。 parallel.parallelAxisDefault: 配置多个 parallelAxis 时，有些值一样的属性，如果书写多遍则比较繁琐，那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前，parallelAxisDefault 里的配置项，会分别融合进 parallelAxis，形成最终的坐标轴的配置。
- parallel.parallelAxisDefault.type: 坐标轴类型。
'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。 - parallel.parallelAxisDefault.name: 坐标轴名称。
- parallel.parallelAxisDefault.nameLocation: 坐标轴名称显示位置。
可选： 'start' 'middle' 'end' - parallel.parallelAxisDefault.nameTextStyle: 坐标轴名称的文字样式。...
- parallel.parallelAxisDefault.nameGap: 坐标轴名称与轴线之间的距离。
- parallel.parallelAxisDefault.inverseL: 是否是反向坐标轴。
- parallel.parallelAxisDefault.boundaryGap: 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
- parallel.parallelAxisDefault.min: 坐标轴刻度最小值，在类目轴中无效。
- parallel.parallelAxisDefault.max: 坐标轴刻度最大值，在类目轴中无效。
- parallel.parallelAxisDefault.scale: 只在数值轴中（type: 'value'）有效。
- parallel.parallelAxisDefault.splitNumber: 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效。
- parallel.parallelAxisDefault.interval: 坐标轴分割间隔。
- parallel.parallelAxisDefault.axisLine: 坐标轴轴线相关设置。
- parallel.parallelAxisDefault.axisLine.show: 坐标轴轴线相关设置。
- parallel.parallelAxisDefault.axisLine.lineStyle: ...
- parallel.parallelAxisDefault.axisTick: 坐标轴刻度相关设置。
- parallel.parallelAxisDefault.axisTick.show: 是否显示坐标轴刻度。
- parallel.parallelAxisDefault.axisTick.interval: 坐标轴刻度的显示间隔，在类目轴中有效
- parallel.parallelAxisDefault.axisTick.inside: 坐标轴刻度是否朝内，默认朝外。
- parallel.parallelAxisDefault.axisTick.length: 坐标轴刻度的长度。
- parallel.parallelAxisDefault.axisTick.lineStyle: ...
parallel.parallelAxisDefault.axisLabel: 坐标轴刻度标签的相关设置。
- parallel.parallelAxisDefault.axisLabel.show: 是否显示刻度标签。
- parallel.parallelAxisDefault.axisLabel.interval: 坐标轴刻度标签的显示间隔，在类目轴中有效。
- parallel.parallelAxisDefault.axisLabel.inside: 刻度标签是否朝内，默认朝外。
- parallel.parallelAxisDefault.axisLabel.rotate: 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
- parallel.parallelAxisDefault.axisLabel.margin: 刻度标签与轴线之间的距离。
parallel.parallelAxisDefault.axisLabel.formatter: 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例: // 使用字符串模板，模板变量为刻度默认标签 {value} formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份 var date = new Date(value); var texts = [(date.getMonth() + 1), date.getDate()]; if (idx === 0) { texts.unshift(date.getYear()); } return texts.join('/');}
- parallel.parallelAxisDefault.axisLabel.textStyle: ...
- parallel.parallelAxisDefault.data[i]: 类目数据，在类目轴（type: 'category'）中有效。
示例： // 所有类目名称列表 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名 data: [{ value: '周一', // 突出周一 textStyle: { fontSize: 20, color: 'red' } }, '周二', '周三', '周四', '周五', '周六', '周日']
- parallel.parallelAxisDefault.type: 坐标轴类型。