16-Echarts simplified series: parallel coordinate system parallel and parallelAxis coordinate axis

parallel:

Charts that visualize high-dimensional data are characterized by showing the relationship between multiple variables at the same time, and different data perspectives can be explored by adjusting the order and scaling of the axes. Help explore relationships and trends in data

parallelAxis:

Coordinate axes in a parallel coordinate system.

parallel and parallelAxis have the same relationship with the rectangular coordinate system and the rectangular coordinate X and Y axes, and can be used in the same way.

At the end of the article, complete example code is provided with comments.

Precautions :

axisLabel, coordinate axis scale label style configuration show:false, when hidden , only data labels that are not connected to the next axis are hidden.

inside axis label orientation configuration is invalid

Line style : If you want to control the style of the connecting lines between each axis , please configure it in the lineStyle attribute in the series

1. Configuration code

Configuration of parallel coordinate system 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 的内容配置一致
                    }                    
                }            
            ]                     
        },                      
    
    }
    
}

Parallel coordinate system axis configuration 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 的内容配置一致
                    }                    
                }            
            ] 
    }
}

2. Anatomy diagram 

3. Instance configuration code

use:

option configuration code 


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

Guess you like

Origin blog.csdn.net/youyudehan/article/details/135407474