版權聲明：本文為博主原創文章，轉載請注明來源。開發合作聯系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軸
原文地址：https://blog.csdn.net/luanpeng825485697/article/details/76739958#commentBox