在仪表盘上需要增加目标值,是否能实现仪表轨迹的效果(如上传图片),麻烦各位大神指点迷津。
配置项如下
var angle = [220, -40],
splitNum = 10,
alertVal = 70,
targetVal = 69,
curVal = 67.8;
var option = {
backgroundColor: '#fff',
tooltip: {
show: false,
formatter: "{a} <br/>{b} : {c}%"
},
title:{
subtext: '指标评分|制度评分',
text: (targetVal) + ' '+(curVal),
x: 'center',
y: '60%',
subtextStyle: {
color: '#3da1ee',
fontSize: 25
},
textStyle: {
color: '#f2c967',
fontSize: 30
}
},
series: [
{
name: '内圈环仪表盘',
z: 3,
type: "gauge",
radius: '75%',
//show:false,
min: 0,
max: 100,
startAngle: angle[0],
endAngle: angle[1],
splitNumber: splitNum + 10,
axisLine: {
lineStyle: {
color: [
[1, "#c1c3c5"]
],
width: 10
}
},
axisTick: {
lineStyle: {
color: "#fff",
width: 2
},
length: 0,
splitNumber: 1
},
axisLabel: {
distance: 10,
formatter: function(v) {
if (v % 10 == 0 ) return v;
//else if(v==alertVal) return ''
},
textStyle: {
fontSize:10,
color: "#bbb"
}
},
detail:{//仪表盘数值显示
show:false,
// formatter: "检测值 标准值\n{value} | {curVal} ",
offsetCenter: [0, "60%"],
textStyle: {
fontSize: 30,
color: "#333"}
},
splitLine: {
show: true,
length: 10,
lineStyle: {
color: '#fff',
width: 2
}
},
data: [{
name: "",
value: curVal
}]
},
{
name: "外环仪表盘四段颜色",
type: "gauge",
min: 0,
max: 100,
splitNumber:5,
radius: '83%',
startAngle: angle[0],
endAngle: angle[1],
splitNumber: splitNum,
axisLine: {
lineStyle: {
color: [//调整内圈颜色
[0.6, '#FF0000'],
[0.8, '#FFFF00'],
[0.9,'#00FF99'],
[1, "#3fa7dc"]
],
width: 15
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: true,
length: 15,
lineStyle: {
color: '#fff',
width: 2
}
},
itemStyle: {
normal: {
color: "transparent"
}
},
pointer: {
show:false,
length: 0
},
detail: {
show: false
},
title: {
show: false
},
data: [{
name: "",
value: ''
}]
},
]
}