16-Echarts简化系列之：平行坐标系 parallel 和 parallelAxis 坐标轴
2024-01-08 04:03:08
parallel：
可视化高维数据的图表，特点在于可同时展示多个变量之间的关系，并且可以通过调整轴的顺序和缩放来探索不同的数据视角。帮助探索数据之间的关系和趋势
parallelAxis：
平行坐标系中的坐标轴。
parallel 和 parallelAxis 和直角坐标系和直角坐标X、Y轴关系一致，一样的使用。
文章最后提供完整实例代码，标注注释
注意事项：
axisLabel， 坐标轴刻度标签样式配置 show:false，隐藏的时候，只隐藏没有和下一个轴连接线的数据标签。
inside 坐标轴标签朝向配置视乎无效
线条样式： 如果你想控制各轴之间的连接线条的样式，请在 series 中的 lineStyle 属性中配置
一、配置代码
平行坐标系的配置?parallel
// 平行坐标系的配置
option={
parallel:{
id:'2', // 组件ID
z:'2', // 图层优先级
zlevel:'1', // 图形绘制优先级
left:'20%', // 距离容器左侧偏移
right:'10%', // 距离容器右侧偏移
top:'10%', // 距离容器顶部偏移
bottom:'10%', // 距离容器底部的偏移
width:'100%', // 组件的宽度
height:'100%', // 组件的高度
layout:'horizontal', // 坐标轴布局方式
axisExpandable:true, // 是否允许点击折叠
axisExpandCenter:50, // 以哪个轴为中心展开
axisExpandCount:5, // 初始化哪些轴处于展开状态
axisExpandWidth:50, // 展开状态轴间距
axisExpandTriggerOn:'click', // 如何出发展开状态，是点击还是悬浮的时候
//坐标轴样式配置
parallelAxisDefault:{
type:'value', // 轴类型
name:'name', // 坐标轴名称
nameLocation:'end', // 坐标轴名称显示位置
nameGap:20, // 坐标轴名称和轴线之间距离
nameRotate:90, // 坐标轴名称旋转角度
inverse:true, // 是否反向坐标轴
boundaryGap:['20%','20%'], // 坐标轴两边留白
min:0, // 坐标轴刻度最小值
max:100, // 坐标轴刻度最大值
scale:true, // 坐标轴是否脱离0刻度
splitNumber:5, // 坐标轴分割段数
minInterval:5, // 自动计算坐标轴最小间隔大小
maxInterval:5, // 自动计算坐标轴最大间隔大小
interval:5, // 强制设置坐标轴分割间隔
logBase:10, // 对数轴的底数
silent:true, // 坐标轴是否静态无法交互
triggerEvent:true, // 坐标轴标签是否响应和触发鼠标事件
animation:true, // 是否开启动画
animationThreshold:200, // 开启动画阈值
animationDuration:100, // 初始动画的时长
animationEasing:'cubicOut', // 初始动画的缓动效果
animationDelay:100, // 初始动画延迟
animationDurationUpdate:100, // 数据更新动画时长
animationEasingUpdate:100, // 数据更新动画缓动效果
animationDelayUpdata:100, // 数据更新动画的延迟
// 坐标轴名称样式
nameTextStyle:{
color:'red', // 字体颜色
fontStyle:'normal', // 文字字体风格
fontWeight:'bold', // 文字字体粗细
fontFamily:'serif', // 字体系列
fontSize:12, // 字体大小
align:'left', // 字体水平对齐方式
verticalAlign:'top', // 文字垂直对齐方式
lineHeight:56, // 行高
backgroundColor:'red', // 文字块背景颜色
borderColor:'red', // 文字块边框颜色
borderWidth:20, // 文字边框宽度
borderType:'solid', // 文字块边框描边类型
borderDashOffset:10, // 虚线的偏移量
borderRadius:40, // 文字块的圆角
padding:[2,2,2,2], // 文字块内边距
shadowColor:'red', // 文字块的背景阴影颜色
shadowBlur:10, // 文字块的背景阴影长度
shadowOffsetX:10, // 阴影水平偏移量
shadowOffsetY:10, // 阴影垂直偏移量
width:120, // 文本显示宽度
height:120, // 文本显示高度
textBorderColor:'red', // 文字本身的描边颜色
textBorderWidth:20, // 文字本身的描边宽度
textBorderType:'solid', // 文字的描边类型
textBorderDashOffset:20, // 虚线的偏移量
textShadowColor:'red', // 文字阴影颜色
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShadowOffsetY:10, // 文字阴影垂直偏移量
overflow:'none', // 文字超出宽度时，是截断还是换行
ellipsis:'···', // 文字截断时，末尾显示内容
// 富文本
rich:{
a:{
color:'red',
lineHeight:10,
}
}
},
// 坐标轴线的样式
axisLine:{
show:true, // 是否显示坐标轴轴线
symbol:'none', // 轴线两边箭头
symbolSize:[10,15], // 轴线两边箭头大小
symbolOffset:[0,0], // 轴线两边的箭头偏移
// 轴线样式
lineStyle:{
color:'red', // 轴线颜色
width:5, // 轴线宽度
type:'solid', // 轴线类型
dashOffset:10, // 轴线为虚线时的偏移量
cap:'butt', // 轴线末端形状
join:'bevel', // 线段相连部分的图形
miterLimit:10, // join 为 miter 时,斜截面比例
shadowBlur:10, // 轴线阴影模糊大小
shadowColor:'red', // 轴线阴影颜色
shadowOffsetX:10, // 轴线阴影水平偏移量
shadowOffsetY:10, // 轴线阴影垂直偏移量
opacity:0.5, // 轴线透明度
}
},
// 坐标轴刻度的样式
axisTick:{
show:true, // 是否显示坐标轴刻度
alignWithLabel:true, // boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
interval:1, // 坐标轴刻度显示间隔
inside:true, // 坐标轴刻度是否朝内
length:10, // 坐标轴刻度的长度
// 刻度线的样式
lineStyle:{
// ··· 与上方的 axisLine 中 lineStyle 内容一张
}
},
// 坐标轴次刻度线的样式
minorTick:{
show:false, // 是否显示次刻度线
splitNumber:5, // 次刻度分割数，默认为 5段
length:3, // 次刻度的长度
// 次刻度线的样式
lineStyle:{
// ··· 与上方的 axisLine 中 lineStyle 内容一张
},
},
// 坐标轴刻度标签样式
axisLabel:{
show:true, // 是否显示刻度标签
interval:'auto', // 坐标轴刻度标签显示间隔
inside:true, // 刻度标签是否朝内
rotate:-90, // 刻度标签旋转角度
margin:10, // 刻度标签与轴线之间的距离
formatter:'{value}', // 刻度标签内容格式器
showMinLabel:true, // 是否显示最小的 label
showMaxLabel:true, // 是否显示最大的 label
hideOverlap:true, // 是否隐藏重叠的标签
color:'red', // 字体颜色
fontStyle:'normal', // 文字字体风格
fontWeight:'bold', // 文字字体粗细
fontFamily:'serif', // 字体系列
fontSize:12, // 字体大小
align:'left', // 字体水平对齐方式
verticalAlign:'top', // 文字垂直对齐方式
lineHeight:56, // 行高
backgroundColor:'red', // 文字块背景颜色
borderColor:'red', // 文字块边框颜色
borderWidth:20, // 文字边框宽度
borderType:'solid', // 文字块边框描边类型
borderDashOffset:10, // 虚线的偏移量
borderRadius:40, // 文字块的圆角
padding:[2,2,2,2], // 文字块内边距
shadowColor:'red', // 文字块的背景阴影颜色
shadowBlur:10, // 文字块的背景阴影长度
shadowOffsetX:10, // 阴影水平偏移量
shadowOffsetY:10, // 阴影垂直偏移量
width:120, // 文本显示宽度
height:120, // 文本显示高度
textBorderColor:'red', // 文字本身的描边颜色
textBorderWidth:20, // 文字本身的描边宽度
textBorderType:'solid', // 文字的描边类型
textBorderDashOffset:20, // 虚线的偏移量
textShadowColor:'red', // 文字阴影颜色
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShadowOffsetY:10, // 文字阴影垂直偏移量
overflow:'none', // 文字超出宽度时，是截断还是换行
ellipsis:'···', // 文字截断时，末尾显示内容
// 富文本
rich:{
a:{
color:'red',
lineHeight:10,
},
},
},
// 类目数据
data:[
{
value:'name', // 数据类目名称
textStyle:{
// ··· 与坐标轴名称样式 nameTextStyle 的内容配置一致
}
}
]
},
}
}平行坐标系坐标轴配置?parallelAxis
// parallelAxis 配置
option={
parallelAxis:{
id:'5', // 组件的ID
dim:10, // 坐标轴的维度序号
parallelIndex:0, // 坐标轴对应的坐标系
realtime:true, // 是否开启坐标轴刷选
type:'value', // 轴类型
name:'name', // 坐标轴名称
nameLocation:'end', // 坐标轴名称显示位置
nameGap:20, // 坐标轴名称和轴线之间距离
nameRotate:90, // 坐标轴名称旋转角度
inverse:true, // 是否反向坐标轴
boundaryGap:['20%','20%'], // 坐标轴两边留白
min:0, // 坐标轴刻度最小值
max:100, // 坐标轴刻度最大值
scale:true, // 坐标轴是否脱离0刻度
splitNumber:5, // 坐标轴分割段数
minInterval:5, // 自动计算坐标轴最小间隔大小
maxInterval:5, // 自动计算坐标轴最大间隔大小
interval:5, // 强制设置坐标轴分割间隔
logBase:10, // 对数轴的底数
silent:true, // 坐标轴是否静态无法交互
triggerEvent:true, // 坐标轴标签是否响应和触发鼠标事件
animation:true, // 是否开启动画
animationThreshold:200, // 开启动画阈值
animationDuration:100, // 初始动画的时长
animationEasing:'cubicOut', // 初始动画的缓动效果
animationDelay:100, // 初始动画延迟
animationDurationUpdate:100, // 数据更新动画时长
animationEasingUpdate:100, // 数据更新动画缓动效果
animationDelayUpdata:100, // 数据更新动画的延迟
// 坐标轴上的刷选样式
areaSelectStyle:{
width:20, // 选框宽度
borderColor:'red', // 选框的边框颜色
borderWidth:10, // 选框的边框宽度
color:'red', // 选框的填充颜色
opacity:0.8, // 选框的透明度
}
// 坐标轴名称样式
nameTextStyle:{
color:'red', // 字体颜色
fontStyle:'normal', // 文字字体风格
fontWeight:'bold', // 文字字体粗细
fontFamily:'serif', // 字体系列
fontSize:12, // 字体大小
align:'left', // 字体水平对齐方式
verticalAlign:'top', // 文字垂直对齐方式
lineHeight:56, // 行高
backgroundColor:'red', // 文字块背景颜色
borderColor:'red', // 文字块边框颜色
borderWidth:20, // 文字边框宽度
borderType:'solid', // 文字块边框描边类型
borderDashOffset:10, // 虚线的偏移量
borderRadius:40, // 文字块的圆角
padding:[2,2,2,2], // 文字块内边距
shadowColor:'red', // 文字块的背景阴影颜色
shadowBlur:10, // 文字块的背景阴影长度
shadowOffsetX:10, // 阴影水平偏移量
shadowOffsetY:10, // 阴影垂直偏移量
width:120, // 文本显示宽度
height:120, // 文本显示高度
textBorderColor:'red', // 文字本身的描边颜色
textBorderWidth:20, // 文字本身的描边宽度
textBorderType:'solid', // 文字的描边类型
textBorderDashOffset:20, // 虚线的偏移量
textShadowColor:'red', // 文字阴影颜色
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShadowOffsetY:10, // 文字阴影垂直偏移量
overflow:'none', // 文字超出宽度时，是截断还是换行
ellipsis:'···', // 文字截断时，末尾显示内容
// 富文本
rich:{
a:{
color:'red',
lineHeight:10,
}
}
},
// 坐标轴线的样式
axisLine:{
show:true, // 是否显示坐标轴轴线
symbol:'none', // 轴线两边箭头
symbolSize:[10,15], // 轴线两边箭头大小
symbolOffset:[0,0], // 轴线两边的箭头偏移
// 轴线样式
lineStyle:{
color:'red', // 轴线颜色
width:5, // 轴线宽度
type:'solid', // 轴线类型
dashOffset:10, // 轴线为虚线时的偏移量
cap:'butt', // 轴线末端形状
join:'bevel', // 线段相连部分的图形
miterLimit:10, // join 为 miter 时,斜截面比例
shadowBlur:10, // 轴线阴影模糊大小
shadowColor:'red', // 轴线阴影颜色
shadowOffsetX:10, // 轴线阴影水平偏移量
shadowOffsetY:10, // 轴线阴影垂直偏移量
opacity:0.5, // 轴线透明度
}
},
// 坐标轴刻度的样式
axisTick:{
show:true, // 是否显示坐标轴刻度
alignWithLabel:true, // boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
interval:1, // 坐标轴刻度显示间隔
inside:true, // 坐标轴刻度是否朝内
length:10, // 坐标轴刻度的长度
// 刻度线的样式
lineStyle:{
// ··· 与上方的 axisLine 中 lineStyle 内容一张
}
},
// 坐标轴次刻度线的样式
minorTick:{
show:false, // 是否显示次刻度线
splitNumber:5, // 次刻度分割数，默认为 5段
length:3, // 次刻度的长度
// 次刻度线的样式
lineStyle:{
// ··· 与上方的 axisLine 中 lineStyle 内容一张
},
},
// 坐标轴刻度标签样式
axisLabel:{
show:true, // 是否显示刻度标签
interval:'auto', // 坐标轴刻度标签显示间隔
inside:true, // 刻度标签是否朝内
rotate:-90, // 刻度标签旋转角度
margin:10, // 刻度标签与轴线之间的距离
formatter:'{value}', // 刻度标签内容格式器
showMinLabel:true, // 是否显示最小的 label
showMaxLabel:true, // 是否显示最大的 label
hideOverlap:true, // 是否隐藏重叠的标签
color:'red', // 字体颜色
fontStyle:'normal', // 文字字体风格
fontWeight:'bold', // 文字字体粗细
fontFamily:'serif', // 字体系列
fontSize:12, // 字体大小
align:'left', // 字体水平对齐方式
verticalAlign:'top', // 文字垂直对齐方式
lineHeight:56, // 行高
backgroundColor:'red', // 文字块背景颜色
borderColor:'red', // 文字块边框颜色
borderWidth:20, // 文字边框宽度
borderType:'solid', // 文字块边框描边类型
borderDashOffset:10, // 虚线的偏移量
borderRadius:40, // 文字块的圆角
padding:[2,2,2,2], // 文字块内边距
shadowColor:'red', // 文字块的背景阴影颜色
shadowBlur:10, // 文字块的背景阴影长度
shadowOffsetX:10, // 阴影水平偏移量
shadowOffsetY:10, // 阴影垂直偏移量
width:120, // 文本显示宽度
height:120, // 文本显示高度
textBorderColor:'red', // 文字本身的描边颜色
textBorderWidth:20, // 文字本身的描边宽度
textBorderType:'solid', // 文字的描边类型
textBorderDashOffset:20, // 虚线的偏移量
textShadowColor:'red', // 文字阴影颜色
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShadowOffsetY:10, // 文字阴影垂直偏移量
overflow:'none', // 文字超出宽度时，是截断还是换行
ellipsis:'···', // 文字截断时，末尾显示内容
// 富文本
rich:{
a:{
color:'red',
lineHeight:10,
},
},
},
// 类目数据
data:[
{
value:'name', // 数据类目名称
textStyle:{
// ··· 与坐标轴名称样式 nameTextStyle 的内容配置一致
}
}
]
}
}二、解剖图?
三、?实例配置代码
使用：
option 配置代码?
var dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
[20, 22, 8, 17, 0.48, 23, 10, '优'],
[21, 39, 15, 36, 0.61, 29, 13, '优'],
[22, 94, 69, 114, 2.08, 73, 39, '良'],
[23, 99, 73, 110, 2.43, 76, 48, '良'],
[24, 31, 12, 30, 0.5, 32, 16, '优'],
[25, 42, 27, 43, 1, 53, 22, '优'],
[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
[30, 52, 24, 60, 1.03, 50, 21, '良'],
[31, 46, 5, 49, 0.28, 10, 6, '优']
];
var dataGZ = [
[1, 26, 37, 27, 1.163, 27, 13, '优'],
[2, 85, 62, 71, 1.195, 60, 8, '良'],
[3, 78, 38, 74, 1.363, 37, 7, '良'],
[4, 21, 21, 36, 0.634, 40, 9, '优'],
[5, 41, 42, 46, 0.915, 81, 13, '优'],
[6, 56, 52, 69, 1.067, 92, 16, '良'],
[7, 64, 30, 28, 0.924, 51, 2, '良'],
[8, 55, 48, 74, 1.236, 75, 26, '良'],
[9, 76, 85, 113, 1.237, 114, 27, '良'],
[10, 91, 81, 104, 1.041, 56, 40, '良'],
[22, 84, 94, 140, 2.238, 68, 18, '良'],
[23, 93, 77, 104, 1.165, 53, 7, '良'],
[24, 99, 130, 227, 3.97, 55, 15, '良'],
[25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
[26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
[27, 81, 48, 62, 1.619, 26, 3, '良'],
[28, 56, 48, 68, 1.336, 37, 9, '良'],
[29, 82, 92, 174, 3.29, 0, 13, '良'],
[30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
[31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
var dataSH = [
[1, 91, 45, 125, 0.82, 34, 23, '良'],
[2, 65, 27, 78, 0.86, 45, 29, '良'],
[3, 83, 60, 84, 1.09, 73, 27, '良'],
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
[6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
[8, 89, 65, 78, 0.86, 51, 26, '良'],
[9, 53, 33, 47, 0.64, 50, 17, '良'],
[10, 80, 55, 80, 1.01, 75, 24, '良'],
[11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
[12, 99, 71, 142, 1.1, 62, 42, '良'],
[13, 95, 69, 130, 1.28, 74, 50, '良'],
[14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
[15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
[16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
[17, 79, 43, 107, 1.05, 59, 37, '良'],
[18, 71, 46, 89, 0.86, 64, 25, '良'],
[26, 39, 24, 38, 0.61, 47, 17, '优'],
[27, 39, 24, 39, 0.59, 50, 19, '优'],
[28, 93, 68, 96, 1.05, 79, 29, '良'],
[29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
[30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
[31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];
var schema = [
{ name: 'date', index: 0, text: '日期' },
{ name: 'AQIindex', index: 1, text: 'AQI' },
{ name: 'PM25', index: 2, text: 'PM2.5' },
{ name: 'PM10', index: 3, text: 'PM10' },
{ name: 'CO', index: 4, text: ' CO' },
{ name: 'NO2', index: 5, text: 'NO2' },
{ name: 'SO2', index: 6, text: 'SO2' },
{ name: '等级', index: 7, text: '等级' }
];
// 线条样式
var lineStyle = {
normal: {
width: 1.5,
opacity: 0.5
}
};
option = {
// 调色板
color: ['#c23531', '#91c7ae', '#dd8668'],
legend: {
data: ['北京', '上海', '广州'],
itemGap: 20
},
// 平行坐标系配置
parallel: [
{
left: '2%',
right: '13%',
width:'40%',
height:'40%',
top: '12%',
// 该坐标系中坐标轴的样式
parallelAxisDefault: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
fontSize: 12
},
// 坐标轴的标签配置
axisLabel:{
show:true,
color:'red',
fontSize:14
},
}
},
{
left: '52%',
width:'40%',
height:'40%',
top: '12%',
parallelAxisDefault: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
axisLabel:{
show:true,
fontSize:12,
color:'green',
},
nameTextStyle: {
fontSize: 12
}
}
},{
left: 'center',
width:'60%',
height:'35%',
bottom: '2%',
parallelAxisDefault: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
fontSize: 12
},
// 显示次刻度线
minorTick:{
show:true,
},
axisLabel:{
show:true,
fontSize:14
},
}
},],
// 平行坐标系 坐标轴配置
parallelAxis: [
// 第一个平行坐标系的轴配置，北京
{
dim: 0,
name: schema[0].text,
inverse: true,
max: 31,
nameLocation: 'start'
},
{ 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: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
},
// 第二个平行坐标系的轴配置，上海
{
dim: 0,
name: schema[0].text,
parallelIndex:1,
inverse: true,
max: 31,
nameLocation: 'start'
},
{ dim: 1, parallelIndex:1, name: schema[1].text },
{ dim: 2, parallelIndex:1, name: schema[2].text },
{ dim: 3, parallelIndex:1, name: schema[3].text },
{ dim: 4, parallelIndex:1, name: schema[4].text },
{ dim: 5, parallelIndex:1, name: schema[5].text },
{ dim: 6, parallelIndex:1, name: schema[6].text },
{
dim: 7,
name: schema[7].text,
parallelIndex:1,
type: 'category',
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
},
// 第三个平行坐标系的轴配置，广州
{
dim: 0,
name: schema[0].text,
parallelIndex:2,
inverse: true,
max: 31,
nameLocation: 'start'
},
{ dim: 1, parallelIndex:2, name: schema[1].text },
{ dim: 2, parallelIndex:2, name: schema[2].text },
{ dim: 3, parallelIndex:2, name: schema[3].text },
{ dim: 4, parallelIndex:2, name: schema[4].text },
{ dim: 5, parallelIndex:2, name: schema[5].text },
{ dim: 6, parallelIndex:2, name: schema[6].text },
{
dim: 7,
name: schema[7].text,
parallelIndex:2,
type: 'category',
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
}
],
series: [
{
// 默认绑定至第一个平行坐标系中
name: '北京',
type: 'parallel',
lineStyle: lineStyle,
data: dataBJ
},
{
name: '上海',
type: 'parallel',
lineStyle: lineStyle,
// 绑定至第二个平行坐标系中
parallelIndex:1,
data: dataSH
},
{
name: '广州',
type: 'parallel',
// 绑定至第三个平行坐标系中
parallelIndex:2,
lineStyle: lineStyle,
data: dataGZ
}
]
};
文章来源:https://blog.csdn.net/youyudehan/article/details/135407474
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！