16-Echarts简化系列之：平行坐标系 parallel 和 parallelAxis 坐标轴

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
    }
  ]
};