餅圖
1.調(diào)整標(biāo)題位置此蜈,圖例位置
title: {
text: "標(biāo)題",
x: "center", //水平位置 left center right
y: "bottom", //垂直位置 top center bottom
textStyle: { // 自定義樣式
color: "#333",
fontStyle: "normal",
fontSize: 12,
fontWeight: "200"
}
},
2.更改圖例位置击儡,圖標(biāo)
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 40, //距離底部距離
left: "center",
icon: "circle",//圖標(biāo)的類型
data: this.pieKey //數(shù)據(jù)
},
3.類型太多,顏色不想重復(fù)礁遵,字體和軸覆蓋
series: [
{
type: "pie",
radius: "65%",
center: ["50%", "45%"],
selectedMode: "single",
data: this.pieVal,
minAngle: 3, //最小的扇區(qū)角度(0 ~ 360),用于防止某個(gè)值過小導(dǎo)致扇區(qū)太小影響交互
avoidLabelOverlap: true,
label: {
align: "left",
normal: {
formatter(v) {
let text = Math.round(v.percent) + "%" + "" + v.name;
if (text.length <= 8) {
return text;
} else if (text.length > 8 && text.length <= 16) {
return (text = ${text.slice(0, 8)}\n${text.slice(8)}
);
} else if (text.length > 16 && text.length <= 24) {
return (text = ${text.slice(0, 8)}\n${text.slice( 8, 16 )}\n${text.slice(16)}
);
} else if (text.length > 24 && text.length <= 30) {
return (text = ${text.slice(0, 8)}\n${text.slice( 8, 16 )}\n${text.slice(16, 24)}\n${text.slice(24)}
);
} else if (text.length > 30) {
return (text = ${text.slice(0, 8)}\n${text.slice( 8, 16 )}\n${text.slice(16, 24)}\n${text.slice( 24, 30 )}\n${text.slice(30)}
);
}
},
textStyle: {
fontSize: 8
}
}
},
itemStyle: {
normal: { //顏色隨機(jī)
color: function (){return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); }
}
}
}
]
柱狀圖
1.文字太多重疊采记,顯示不全
xAxis: {
type: "category",
data: this.pieKey,
axisLabel: {
interval:0,//代表顯示所有x軸標(biāo)簽顯示
rotate:30, //代表逆時(shí)針旋轉(zhuǎn)45度
}
},
后續(xù)遇到問題在補(bǔ)充