xAxis 屬性
xAxis : [ { type : 'category',//坐標軸類型 // show:'',//是否顯示 x 軸 //id:'',組件 ID。默認不指定。 //gridIndex :'',x 軸所在的 grid 的索引，默認位於第一個 grid ogridIndex :'',//ffset:'',//X 軸相對於默認位置的偏移，在相同的 position 上有多個 X 軸的時候有用 position:'bottom',//x 軸的位置 data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name:'中國',//坐標軸名稱 nameLocation:'middle',//坐標軸名稱顯示位置 nameTextStyle:{ //坐標軸名稱的文字樣式 color:'yellow',//坐標軸名稱的顏色 fontStyle:'oblique',//坐標軸名稱文字字體的風格 fontWeight:'bold',//坐標軸名稱文字字體的粗細 fontFamily:'Arial',//坐標軸名稱文字的字體系列 fontSize:'16',//坐標軸名稱文字的字體大小 align:'center',//文字水平對齊方式 textVerticalAlign:'bottom',//文字垂直對齊方式 lineHeight:'20',//行高 backgroundColor:'#9999',//文字塊背景色 borderColor:'blue',//文字塊邊框顏色 borderWidth:'20',//文字塊邊框寬度 barBorderRadius:'',//文字塊的圓角 shadowColor:'green',//文字塊的背景陰影顏色 shadowBlur:'19',//文字塊的背景陰影長度 shadowOffsetX:'5',//文字塊的背景陰影 X 偏移 shadowOffsetY:'15',//文字塊的背景陰影 Y 偏移 width:'50',//文字塊的寬度 height:'70',//文字塊的高度 textareaBorderColor:'white',//文字本身的描邊顏色 textShadowColor:'#7777',//文字本身的陰影顏色 textShadowBlur:'#1111',//文字本身的陰影長度 textShadowOffsetX:'20',//文字本身的陰影 X 偏移 textShadowOffsetY:'25',//文字本身的陰影 Y 偏移 label:{ /* rich:{//自定義富文本樣式 a: { color: 'red', lineHeight: 10 } }*/ } }, nameGap :'20',//坐標軸名稱與軸線之間的距離 nameRotate:'20',//坐標軸名字旋轉，角度值 inverse :'false',//是否是反向坐標軸 boundaryGap: ['20%', '20%'],//坐標軸兩邊留白策略 min :'12',//坐標軸刻度最小值 max :'12',//坐標軸刻度最大值 scale :'false',//只在數值軸中（type: 'value'）有效 splitNumber:'3',//坐標軸的分割段數 minInterval :'12',//自動計算的坐標軸最小間隔大小 maxInterval:'12',//自動計算的坐標軸最大間隔大小 interval :'',//強制設置坐標軸分割間隔 logBase :'',//對數軸的底數 silent :'',//坐標軸的標簽是否響應和觸發鼠標事件，默認不響應 axisLine :{ //坐標軸軸線相關設置 show:' ',//是否顯示坐標軸軸線 onZero:' ',//X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度 onZeroAxisIndex:'12',//當有雙軸時，可以用這個屬性手動指定，在哪個軸的 0 刻度上 symbol:'arrow',//軸線兩邊的箭頭 symbolSize:[19, 15] ,//軸線兩邊的箭頭的大小，第一個數字表示寬度（垂直坐標軸方向），第二個數字表示高度（平行坐標軸方向） symbolOffset:[12,23],//軸線兩邊的箭頭的偏移 lineStyle:{ color:"#555",//坐標軸線線的顏色 width:'2',//坐標軸線線寬 type:'dashed',//坐標軸線線的類型 shadowBlur:'12',//圖形陰影的模糊大小 shadowColor:'red',//陰影顏色 shadowOffsetX:'12',//陰影水平方向上的偏移距離 shadowOffsetY:'6',//陰影垂直方向上的偏移距離 opacity:'6'//圖形透明度 } }, axisTick :{ //坐標軸刻度相關設置 show:'teue',//是否顯示坐標軸刻度 alignWithLabel:'ture',//保證刻度線和標簽對齊 interval:'',//坐標軸刻度的顯示間隔 //inside:'false',//坐標軸刻度是否朝內，默認朝外 length:'7',//坐標軸刻度的長度 lineStyle:{ color:'red',// 刻度線的顏色 width:'2',//坐標軸刻度線寬 type:'solid',//坐標軸刻度線的類型 shadowBlur:'2',//圖形陰影的模糊大小 shadowColor:'blue',//陰影顏色 shadowOffsetX:'1',//陰影水平方向上的偏移距離 shadowOffsetY:'1',//陰影垂直方向上的偏移距離 opacity:'2',//圖形透明度 } } , axisLabel :{ //坐標軸刻度標簽的相關設置 show:'true ',//是否顯示刻度標簽 interval:'auto',//坐標軸刻度標簽的顯示間隔，在類目軸中有效 // inside:'false ',//刻度標簽是否朝內，默認朝外 rotate:'23',//刻度標簽旋轉的角度 margin:'19',//刻度標簽與軸線之間的距離 ///formatter刻度標簽的內容格式器 showMinLabel:'null',//是否顯示最小 tick 的 label showMaxLabel:'null',//是否顯示最大 tick 的 label color:'red',//刻度標簽文字的顏色 fontStyle:'italic',//文字字體的風格 fontWeight:'bold',//文字字體的粗細 fontFamily:'Microsoft YaHei',//文字的字體系列 fontSize:'14',//文字的字體大小 align:'center',//文字水平對齊方式 verticalAlign:'center',//文字垂直對齊方式 lineHeight:'23',//行高 backgroundColor:'#9999',//文字塊背景色 borderColor:'#fff',//文字塊邊框顏色 borderWidth:'12',//文字塊邊框寬度 borderRadius:'21',//文字塊的圓角 padding:[3, 4, 5, 6],//文字塊的內邊距 shadowColor:'blue',//文字塊的背景陰影顏色 shadowBlur:'5',//文字塊的背景陰影長度 shadowOffsetX:'3',//文字塊的背景陰影 X 偏移 shadowOffsetY:'3',//文字塊的背景陰影 Y 偏移 width:'12',//文字塊的寬度 height:'12',//文字塊的高度。一般不用指定，不指定則自動是文字的高度 }, } ],
legend屬性：
//控制 legend 的位置和樣式
legend:[{
bottom: 1,
left: "40%",
textStyle:{color: 'red'},
data:['2011年'],
},
{
bottom: 1,
left: "60%",
textStyle:{color: 'blue'},
data:['2012年'],
}, {
bottom: 1,
left: "80%",
textStyle:{color: 'blue'},
data:['2013年'],
},
],
grid屬性：
//直角坐標系內繪圖網格樣式和位置
grid: { left: '3%', right: '4%', bottom: '7%', show :'true', backgroundColor :'#9999', containLabel: true },
title屬性：
//標題組件，包含主標題和副標題
title: {
text: '世界人口總量',
subtext :'bili ',
left :'center',
textStyle:{
color:'red'
},
subtextStyle :{
color:'blue'
}
},
tooltip屬性
//提示框組件。
tooltip: {
trigger: 'item',
axisPointer: {
type: 'line',
lineStyle:{
width:'' ,
type:'dashed'
}
},
textStyle:{
color:'red'
}
},
toolbox屬性
//工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。
toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } },
series屬性
series: [
{
//折線
name: '2011年',
type: 'line',
symbol :'triangle',
symbolRotate:'12',
symbolSize :'6',
showSymbol :'false',
itemStyle :{
//折線拐點標志的樣式
borderColor:'blue',
borderWidth:'3'
},
lineStyle :{
//線條樣式。
width:'5',
type :'dashed'
},
areaStyle :{
//區域填充樣式
color:'yellow',
},
emphasis :{
//圖形的高亮樣式。
itemStyle:{
color:'white'
}
},
smooth :'true',
data: [13203, 53489, 21034, 104970, 131744, 830230]
},{
name: '2013年',
type: 'bar',
data: [65203, 23489, 29034, 10970, 131744, 330230]
},
{
name: '2012年',
type: 'bar',
data: [19325, 238838, 31000, 121594, 134141, 081807]
}
]
