配置網(wǎng)格距離canvase外層盒子距離
grid: {
left: "1%",
top: "18%",
right: "4%",
bottom: "5%",
containLabel: true // 這常用于『防止標(biāo)簽溢出』的場景
},
X軸設(shè)置
xAxis: {
name: "學(xué)生",
boundaryGap: true, // 坐標(biāo)軸兩邊留白策略,為true時(shí)不以0刻度開始
nameTextStyle: { // 設(shè)置name的樣式
color: "#feb00a",
fontSize: 18
},
axisLabel:{ //x軸文字
// 設(shè)置文字疊放
interval: 0,
formatter:function(value)
{
return value.split("").join("\n");
},
textStyle: { // 文字樣式
color: "#fff",
fontSize: 18
}
},
dataZoom: [ // 軸坐標(biāo)數(shù)據(jù)可滾動
{
type: "slider",
show: true,
height: 10, // 滾動條高度
startValue: 0, // 數(shù)據(jù)下標(biāo)為0時(shí)開始
endValue: 39, // 數(shù)據(jù)下標(biāo)為39時(shí)結(jié)束
handleSize: 8,
handleStyle: {
color: "#7171c3"
},
}
],
axisLine: { // x軸的線
lineStyle: { // 線的樣式
color: "#6b6b97",
width: 3 // 線寬3px
}
},
axisTick: { // x軸刻度
alignWithLabel: true, //在 boundaryGap 為 true 的時(shí)候有效，可以保證刻度線和標(biāo)簽對齊如圖一
lineStyle: {
color: "#6b6b97",
width: 3
}
},
}
圖一
Y軸
yAxis: {
max: 100, // 最大值
splitLine: { // 控制網(wǎng)格線是否顯示
show: false
},
axisLabel:{ //y軸文字
show:true,
margin: 15, // 文字到刻度線的距離
textStyle: {
color: "#fff",
fontSize: 20
}
},
nameGap: 25 // 坐標(biāo)軸名稱與坐標(biāo)軸的距離
}
series設(shè)置內(nèi)容區(qū)域
series: [{
data: data, // 設(shè)置y軸的值
// 設(shè)置一條平行于x軸的水平線
markLine: {
lineStyle: {
type: "dashed", // 類型：虛線
color: "#7171c3"
},
data: [
{
name: "y軸為60的水平線",
yAxis: 60
}
]
},
itemStyle: {
// 設(shè)置不同圖形顏色，回調(diào)函數(shù)返回json里的data就是value值
color: function (dt) {
var y1 = 60,
y2 = 80;
if (dt.data >= y1 && dt.data < y2) {return "#7e7af8"}
if (dt.data < y1) {return "#ec1228"}
if (dt.data >= y2) {return "#fed323"}
}
},
}]
圖二
