Echarts xAxis、yAxis

 

2017年08月06日 09:10:12 數據架構師 閱讀數：37641更多

所屬專欄： Echarts數據可視化

 

 版權聲明：本文爲博主原創文章，轉載請註明來源。開發合做聯繫82548597@qq.com https://blog.csdn.net/luanpeng825485697/article/details/76739958

分享一個朋友的人工智能教程。零基礎！通俗易懂！風趣幽默！還帶黃段子！你們能夠看看是否對本身有幫助http://www.captainbed.net/luanpeng

---

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

Echarts數據可視化開發代碼註釋全解
Echarts數據可視化開發參數配置全解

6大公共組件詳解（點擊進入）：
title詳解、 tooltip詳解、toolbox詳解、legend詳解、dataZoom詳解、visualMap全解

5大座標系詳解（點擊進入）：
地理座標系geo詳解、grid直角座標系（xAxis、yAxis）詳解、parallel平行座標系詳解、polar極座標系詳解、radar雷達座標系詳解

19種圖表類型詳解（點擊進入，待續）：
series-bar柱形圖詳解、series-effectscatter特效散點圖、series-graph關係圖、series-heatmap熱力圖、series-line線圖、series-map地圖、series-pie餅圖、series-radar雷達圖、series-scatter散點圖

圖表行爲和圖表事件：
action圖表行爲、event圖表事件

Echarts數據可視化grid直角座標系（xAxis、yAxis）詳解：

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 時不繪製該圖形
};


grid=[{
    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",                   //圖例高度
    containLabel: true,               //grid 區域是否包含座標軸的刻度標籤，
    backgroundColor:"transparent", //標題背景色
    borderColor:"#ccc",              //邊框顏色
    borderWidth:0,                    //邊框線寬
    shadowColor:"red",               //陰影顏色
    shadowOffsetX:0,                 //陰影水平方向上的偏移距離
    shadowOffsetY:0,                 //陰影垂直方向上的偏移距離
    shadowBlur:10,                    //陰影的模糊大小
    tooltip:{                        //座標系特定的 tooltip 設定
        show:true,                   //是否顯示提示框組件，包括提示框浮層和 axisPointer
        trigger:"axis",              //觸發類型 none不觸發  'item' 數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。  'axis'  座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
        position: ['50%', '50%'],    //提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置,[10, 10],回掉函數，inside鼠標所在圖形的內部中心位置，top、left、bottom、right鼠標所在圖形上側，左側，下側，右側，
        formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層內容格式器，支持字符串模板和回調函數兩種形式,模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等
        backgroundColor:"transparent",        //標題背景色
        borderColor:"#ccc",         //邊框顏色
        borderWidth:0,               //邊框線寬
        padding:5,                    //圖例內邊距，單位px  5  [5, 10]  [5,10,5,10]
        textStyle:mytextStyle,      //文本樣式
    },
}];
xAxis=[
    {
        show:true,                //是否顯示 x 軸
        gridIndex:0,              //x 軸所在的 grid 的索引，默認位於第一個 grid
        position:"bottom",       //x 軸的位置。"top"，"bottom"，默認 grid 中的第一個 x 軸在 grid 的下方（'bottom'），第二個 x 軸視第一個 x 軸的位置放在另外一側
        offset:0,                 //X 軸相對於默認位置的偏移，在相同的 position 上有多個 X 軸的時候有用
        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
        },
        splitLine:{                 //座標軸在 grid 區域中的分隔線。
            show:true,              //是否顯示分隔線。默認數值軸顯示，類目軸不顯示。
            interval:"auto",        //座標軸分隔線的顯示間隔，在類目軸中有效。默認會採用標籤不重疊的策略間隔顯示標籤。能夠設置成 0 強制顯示全部標籤。若是設置爲 1，表示『隔一個標籤顯示一個標籤』，能夠用數值表示間隔的數據，也能夠經過回調函數控制。回調函數格式以下：
            lineStyle:mylineStyle
        },
        splitArea:{                 //座標軸在 grid 區域中的分隔區域，默認不顯示。
            interval:"auto",
            show:false,             //是否顯示分隔區域
            areaStyle:myareaStyle
        },
        data : ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],             //類目數據，在類目軸（type: 'category'）中有效。
        zlevel:0,                   //X 軸全部圖形的 zlevel 值。
        z:0,                        //X 軸組件的全部圖形的z值
    }
];
yAxis=xAxis;                        //y軸配置內容同x軸

原文地址：http://www.javashuo.com/article/p-hqkekqbb-nc.html