效果图如下
88aad04318b6c13a0d11d5f3ff3b4f1.png
代码如下
setGuage() {
const labelColor= {
yellow: '#FFCC50',
red: '#FD576F',
green: '#0BC187'
}
$('#gaugeView').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
pane: {
startAngle: -120,
endAngle: 120,
background: [{
backgroundColor: '#ffffff',
borderWidth: 0,
outerRadius: '100%',
innerRadius: '0%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0, // 刻度线
lineWidth: 0, // 边框
tickPixelInterval: 30,
tickWidth: 0, // 刻度线
labels: {
step: 2,
rotation: '0',
formatter: function () {
// 格式化文字颜色
let _color = labelColor.red
if ( parseFloat(this.value) <= 20) { _color = labelColor.red }
if ( parseFloat(this.value) > 20 && parseFloat(this.value) < 80 ) { _color = labelColor.yellow }
if ( parseFloat(this.value) >= 80) { _color = labelColor.green }
return `<span style="color: ${_color}"> ${this.value} </span>`;
}
},
title: {
text: '达成率',
align: 'low',
style: { 'color': '#232323', 'letter-spacing': '1px' },
y: 74,
x: -20
},
plotBands: [{ // 三个颜色区域
from: 0,
to: 20,
color: labelColor.red, // red
}, {
from: 20,
to: 80,
color: labelColor.yellow // yellow
}, {
from: 80,
to: 100,
color: labelColor.green // green
}]
},
series: [{ // 达成率 数据
name: 'Speed',
data: [80],
dataLabels: {
borderWidth: 0,
y: 25,
x: -8,
style: { "fontWeight": "400" ,"fontSize": "25px"},
formatter: function () {
// 格式化文字颜色
let _color = labelColor.red
if ( parseFloat(this.y) <= 20) { _color = labelColor.red }
if ( parseFloat(this.y) > 20 && parseFloat(this.y) < 80 ) { _color = labelColor.yellow }
if ( parseFloat(this.y) >= 80 && parseFloat(this.y) <= 100) { _color = labelColor.green }
return `<span style="color: ${_color}"> ${this.y}%</span>`;
}
},
tooltip: {
valueSuffix: ''
}
}],
credits: {//去除水印
enabled: false
},
exporting: { //去除导出
enabled: false
},
plotOptions: {
gauge: {
dial: {
radius: '60%',
backgroundColor: '#C8C8C8',
borderWidth: 0,
baseWidth: 7,
topWidth: 1,
baseLength: '96.8%', // 指针圆度
rearLength: '35%'
},
pivot: { // 指针中心点
backgroundColor: '#C8C8C8',
radius: 7
}
}
}
}, function (c) {
this.chart = c
if (!this.chart.renderer.forExport) {
setInterval( () => {
var point = this.chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
})
}
网友评论