如保把仪盘指针变成圆形
"pointer": {
width:120,
height:120,
radius: 60,
},
配置项如下
function detectionData(str) {
var color = '#5eb95e';
if (str >= 50 && str <= 60) {
color = '#F37B1D';
} else if (str > 60) {
color = '#dd514c';
}
return color;
}
var option = {
"tooltip": {
"formatter": "{a} <br/>{b} : {c}%"
},
"series": [
//火力调节开始
{
"name": "火力调节",
"type": "gauge",
"splitNumber": 4,
//clockwise: false,
"clockwise": true,
"startAngle": 50,
"endAngle": -230,
"axisLine": {
"lineStyle": {
"color": [
[0.31, "#F37B1D"],
[1, "#e9ecf3"]
],
"width": 15
}
},
"axisTick": {
show:false
},
"pointer": {
length: '120%',
width:120,
height:120,
},
"axisLabel": {
distance: -60,
formatter: function(e) {
switch (e + "") {
case "0":
return "低";
case "50":
return "中";
case "100":
return "高";
default:
return ""
}
},
textStyle: {
color: "#fff",
fontSize: 16,
},
},
"splitLine": {
"show": false
},
"detail": {
"formatter": "{value}%",
"offsetCenter": [0, 0],
"textStyle": {
"fontSize": 30,
"color": "#fff"
}
},
"title": {
"offsetCenter": [0, "100%"],
},
"data": [{
"name": "",
"value": 31
}]
},
//火力调节结束
/*火力显示*/
/* {
name: '火力显示',
type: 'gauge',
radius: '40%',
startAngle: 359.9,
endAngle: 0,
splitNumber: 4,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, '#F5A623']
],
width: '100%',
shadowColor: '#F5A623', //默认透明
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 40,
opacity: .7,
}
},
splitLine: { //分隔线样式
show: false,
},
axisLabel: { //刻度标签
show: false,
},
axisTick: { //刻度样式
show: false,
},
detail:{
show: false,
},
data: [{
show: false,
}]
},*/
//火力显示结束
]
}
myChart.setOption(option);
setInterval(function() {
var value = (Math.random() * 100).toFixed(2) - 0;
option.series[0].data[0].value = value;
option.series[0].axisLine.lineStyle.color[0][0] = value / 100;
option.series[0].axisLine.lineStyle.color[0][1] = detectionData(value);
myChart.setOption(option, true);
}, 500);