全棧工程師開發手冊 （作者：欒鵬）

Echarts資料視覺化parallel平行座標系詳解：

mytextStyle={
    color:"#333",                //文字顏色
    fontStyle:"normal",         //italic斜體  oblique傾斜
    fontWeight:"normal",        //文字粗細bold   bolder   lighter  100 | 200 | 300 | 400...
    fontFamily:"sans-serif",    //字體系列
    fontSize:18,                 //字型大小
 

};
mylineStyle={
    color:"#333",               //顏色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支援線性漸變，徑向漸變，紋理填充
    shadowColor:"red",          //陰影顏色
    shadowOffsetX:0,            //陰影水平方向上的偏移距離。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離
    shadowBlur:10,              //圖形陰影的模糊大小。
    type:"solid"
 
,               //座標軸線線的型別，solid，dashed，dotted
    width:1,                    //座標軸線線寬
    opacity:1,                  //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myareaStyle={
    color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔區域顏色。分隔區域會按陣列中顏色的順序依次迴圈設定顏色。預設是一個深淺的間隔色。
    shadowColor:"red",          //陰影顏色
    shadowOffsetX:0
 
,            //陰影水平方向上的偏移距離。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離
    shadowBlur:10,              //圖形陰影的模糊大小。
    opacity:1,                  //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};

parallel=[{
    show:true,                        //是否顯示
    zlevel:0,                         //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
    z:2,                               //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
    left:"10%",                       //元件離容器左側的距離,百分比字串或整型數字
    top:60,                           //元件離容器上側的距離，百分比字串或整型數字
    right:"auto",                     //元件離容器右側的距離,百分比字串或整型數字
    bottom:"auto",                    //元件離容器下側的距離,百分比字串或整型數字
    width:"auto",                     //圖例寬度
    height:"auto",                    //圖例高度
    layout: "horizontal",             //佈局方式，可選值為：'horizontal'：水平排布各個座標軸。'vertical'：豎直排布各個座標軸。
    axisExpandable:false,             //是否允許點選展開摺疊 axis。
    axisExpandCenter:null,            //初始時，以哪個軸為中心展開，這裡給出軸的 index。沒有預設值，需要手動指定。
    axisExpandCount:0,                 //初始時，有多少個軸會處於展開狀態。建議根據你的維度個數而手動指定。
    axisExpandWidth:50,                //在展開狀態，軸的間距是多少，單位為畫素。
    axisExpandTriggerOn:"click",      //'click'：滑鼠點選的時候 expand。'mousemove'：滑鼠懸浮的時候 expand。
    parallelAxisDefault:{             //配置多個 parallelAxis 時，有些值一樣的屬性，如果書寫多遍則比較繁瑣，那麼可以放置在 parallel.parallelAxisDefault 裡
        type:"category",               //座標軸型別。'value' 數值軸，適用於連續資料。'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。
                                         // 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。'log' 對數軸。適用於對數資料
        name:'時間',                    //座標軸名稱
        nameLocation:"end",           //座標軸名稱顯示位置。可選：'start','middle','end'
        nameTextStyle:mytextStyle,    //座標軸名稱的文字樣式
        nameGap:15,                       //座標軸名稱與軸線之間的距離
        nameRotate:0,                     //座標軸名字旋轉，角度值
        inverse:false,                    //是否是反向座標軸
        boundaryGap:true,                 //類目軸中 boundaryGap 可以配置為 true 和 false。非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的陣列，分別表示資料最小值和最大值的延伸範圍，可以直接設定數值或者相對的百分比，在設定 min 和 max 後無效['20%', '20%']
        min:null,                         //座標軸刻度最小值。可以設定成特殊值 'dataMin'，此時取資料在該軸上的最小值作為最小刻度。不設定時會自動計算最小值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
        max:null,                         //座標軸刻度最大值。可以設定成特殊值 'dataMax'，此時取資料在該軸上的最大值作為最大刻度。不設定時會自動計算最大值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
        scale:false,                      //只在數值軸中（type: 'value'）有效。是否是脫離 0 值比例。設定成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設定 min 和 max 之後該配置項無效。
        splitNumber:5,                    //座標軸的分割段數，需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整
        minInterval:0,                    //自動計算的座標軸最小間隔大小,例如可以設定成1保證座標軸分割刻度顯示成整數。只在數值軸中（type: 'value'）有效。
        logBase:10,                       //對數軸的底數，只在對數軸中（type: 'log'）有效
        silent:false,                     //座標軸是否是靜態無法互動
        triggerEvent:false,              //座標軸的標籤是否響應和觸發滑鼠事件
        axisLine:{                        //座標 軸線
            show:true,                    //是否顯示座標軸軸線
            onZero:true,                  //X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效
            lineStyle:mylineStyle
        },
        axisTick :{                       //座標軸刻度相關設定
            show:true,                    //是否顯示座標軸刻度。
            alignWithLabel:false,         //類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標籤對齊
            interval:auto,                //座標軸刻度的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
            inside:false,                 //座標軸刻度是否朝內，預設朝外。
            length:5,                     //座標軸刻度的長度。
            lineStyle:mylineStyle //
        },
        axisLabel:{                     //座標軸刻度標籤的相關設定
            show:true,                  //是否顯示
            interval:"auto",           //座標軸刻度標籤的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
            inside:false,               //刻度標籤是否朝內，預設朝外
            rotate:0,                   //刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度
            margin:8,                   //刻度標籤與軸線之間的距離
            formatter: function (value, index) { //使用函式模板，函式引數分別為刻度數值（類目），刻度的索引
                return value+"kg";
            },
            showMinLabel:null,        //是否顯示最小 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最小 tick 的 label）
            showMaxLabel:null,        //是否顯示最大 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最大 tick 的 label）
            textStyle:mytextStyle
        },
        data : ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],  //類目資料，在類目軸（type: 'category'）中有效。
    },

}];

parallelAxis=[
    {
        dim:0,                         //座標軸的維度序號。
        parallelIndex:0,              //用於定義『座標軸』對應到哪個『座標系』中。
        realtime:true,                //是否座標軸刷選的時候，實時重新整理檢視。如果設為 false，則在刷選動作結束時候，才重新整理檢視。大資料量時，建議設定成 false，從而避免卡頓。
        areaSelectStyle:{             //在座標軸上可以進行框選，這裡是一些框選的設定。
            width:20,                  //框選範圍的寬度。
            borderWidth:1,            //選框的邊框寬度。
            borderColor:'rgba(160,197,232)',  //選框的邊框顏色。
            color: 'rgba(160,197,232)',         //選框的填充色。
            opacity:0.3,              //選框的透明度。
        },
        type:"category",              //座標軸型別。'value' 數值軸，適用於連續資料。'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。
                                       // 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。'log' 對數軸。適用於對數資料
        name:'時間',                  //座標軸名稱
        nameLocation:"end",           //座標軸名稱顯示位置。可選：'start','middle','end'
        nameTextStyle:mytextStyle,    //座標軸名稱的文字樣式
        nameGap:15,                     //座標軸名稱與軸線之間的距離
        nameRotate:0,                  //座標軸名字旋轉，角度值
        inverse:false,                //是否是反向座標軸
        boundaryGap:true,             //類目軸中 boundaryGap 可以配置為 true 和 false。非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的陣列，分別表示資料最小值和最大值的延伸範圍，可以直接設定數值或者相對的百分比，在設定 min 和 max 後無效['20%', '20%']
        min:null,                      //座標軸刻度最小值。可以設定成特殊值 'dataMin'，此時取資料在該軸上的最小值作為最小刻度。不設定時會自動計算最小值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
        max:null,                      //座標軸刻度最大值。可以設定成特殊值 'dataMax'，此時取資料在該軸上的最大值作為最大刻度。不設定時會自動計算最大值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
        scale:false,                   //只在數值軸中（type: 'value'）有效。是否是脫離 0 值比例。設定成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設定 min 和 max 之後該配置項無效。
        splitNumber:5,                 //座標軸的分割段數，需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整
        minInterval:0,                 //自動計算的座標軸最小間隔大小,例如可以設定成1保證座標軸分割刻度顯示成整數。只在數值軸中（type: 'value'）有效。
        logBase:10,                    //對數軸的底數，只在對數軸中（type: 'log'）有效
        silent:false,                 //座標軸是否是靜態無法互動
        triggerEvent:false,           //座標軸的標籤是否響應和觸發滑鼠事件
        axisLine:{                     //座標 軸線
            show:true,                 //是否顯示座標軸軸線
            onZero:true,               //X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效
            lineStyle:mylineStyle
        },
        axisTick :{                   //座標軸刻度相關設定
            show:true,                //是否顯示座標軸刻度。
            alignWithLabel:false,     //類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標籤對齊
            interval:auto,            //座標軸刻度的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
            inside:false,             //座標軸刻度是否朝內，預設朝外。
            length:5,                 //座標軸刻度的長度。
            lineStyle:mylineStyle //
        },
        axisLabel:{                   //座標軸刻度標籤的相關設定
            show:true,                //是否顯示
            interval:"auto",         //座標軸刻度標籤的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
            inside:false,             //刻度標籤是否朝內，預設朝外
            rotate:0,                 //刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度
            margin:8,                 //刻度標籤與軸線之間的距離
            formatter: function (value, index) { //使用函式模板，函式引數分別為刻度數值（類目），刻度的索引
                return value+"kg";
            },
            showMinLabel:null,        //是否顯示最小 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最小 tick 的 label）
            showMaxLabel:null,        //是否顯示最大 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最大 tick 的 label）
            textStyle:mytextStyle
        },
        data : ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],  //類目資料，在類目軸（type: 'category'）中有效。
    }
];