設置儀表盤中顯示字體樣式:
方式如下:
eChartA.setOption ({
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [
{
startAngle: 340, //開始角度 左側角度
endAngle: 0, //結束角度 右側
name: '健康值',
type: 'gauge',
detail: {
offsetCenter: [0,"30%"], //設置儀表盤下方顯示內容位置
formatter:'{value}%',
textStyle:{color:'white',fontSize:20},
},
title : { //設置儀表盤中間顯示文字樣式
textStyle: { // 其餘屬性默認使用全局文本樣式,詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
fontStyle: 'italic',
color:"white"
}
},
data: [{
value: 60,
name: '重要設備健康指數',
}],
center: ["47%", "45%"], // 默認全局居中
splitLine : { //分割線樣式(及10、20等長線樣式)
length : 15,
lineStyle: { // 分隔線樣式。
color: "#eee", //線的顏色,默認 #eee。
opacity: 1, //圖形透明度。支持從 0 到 1 的數字,爲 0 時不繪製該圖形。
width: 2, //線度,默認 2。
type: "solid", //線的類型,默認 solid。 此外還有 dashed,dotted
shadowBlur: 10, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。
shadowColor: "#fff", //陰影顏色。支持的格式同color。
}
},
pointer : { //指針樣式
length: '80%'
},
axisLine:{
show : true,// 是否顯示儀表盤軸線(輪廓線),默認 true。
lineStyle : { // 屬性lineStyle控制線條樣式
shadowBlur: 10, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。
shadowColor: "#fff", //陰影顏色。支持的格式同color。
// color : [ //錶盤顏色
// [ 0.5, "#DA462C" ],//0-50%處的顏色
// [ 0.7, "#FF9618" ],//51%-70%處的顏色
// [ 0.9, "#FFED44" ],//70%-90%處的顏色
// [ 1,"#20AE51" ]//90%-100%處的顏色
// ],
width : 15//錶盤寬度
}
},
axisLabel : { //文字樣式(及“10”、“20”等文字樣式)
color : "white",
distance : 5 //文字離錶盤的距離
},
}
]
}),