highcharts仪表-活动图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7c43c8543b7dc9054b14dbf13da61c0f.png)
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: '#3d3947'
},
colors: ["#29D8B5", "#0095E9", "#F3822F","#FF4B4C","#FF0000"],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
Highcharts.chart('responed-speed-pie', {
chart: {
type: 'solidgauge',
marginTop: 0,
},
credits: {
enabled: false,
},
title: {
text: '',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}:<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}个</span>',
positioner: function (labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 80
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [
{
outerRadius: "105%",
innerRadius: "95%",
backgroundColor: Highcharts.Color(
Highcharts.getOptions().colors[0]
).setOpacity(0.2).get(),
borderWidth: 0,
},
{
outerRadius: "85%",
innerRadius: "75%",
backgroundColor: Highcharts.Color(
Highcharts.getOptions().colors[1]
).setOpacity(0.2).get(),
borderWidth: 0,
},
{
outerRadius: "65%",
innerRadius: "55%",
backgroundColor: Highcharts.Color(
Highcharts.getOptions().colors[2]
).setOpacity(0.2).get(),
borderWidth: 0,
},
{
outerRadius: "45%",
innerRadius: "35%",
backgroundColor: Highcharts.Color(
Highcharts.getOptions().colors[3]
).setOpacity(0.2).get(),
borderWidth: 0,
},
{
outerRadius: "25%",
innerRadius: "15%",
backgroundColor: Highcharts.Color(
Highcharts.getOptions().colors[4]
).setOpacity(0.2).get(),
borderWidth: 0,
}
]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '10px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
size: 180,
}
},
series: [
{
name: "0-50ms",
borderColor: Highcharts.getOptions().colors[0],
data: [
{
color: Highcharts.getOptions().colors[0],
radius: "100%",
innerRadius: "100%",
y: this.responseSolidgauge[0].count,
},
],
},
{
name: "50-150ms",
borderColor: Highcharts.getOptions().colors[1],
data: [
{
color: Highcharts.getOptions().colors[1],
radius: "80%",
innerRadius: "80%",
y: this.responseSolidgauge[1].count,
},
],
},
{
name: "150-300ms",
borderColor: Highcharts.getOptions().colors[2],
data: [
{
color: Highcharts.getOptions().colors[2],
radius: "60%",
innerRadius: "60%",
y: this.responseSolidgauge[2].count,
},
],
},
{
name: "300-500ms",
borderColor: Highcharts.getOptions().colors[3],
data: [
{
color: Highcharts.getOptions().colors[3],
radius: "40%",
innerRadius: "40%",
y: this.responseSolidgauge[3].count,
},
],
},
{
name: ">500ms",
borderColor: Highcharts.getOptions().colors[4],
data: [
{
color: Highcharts.getOptions().colors[4],
radius: "20%",
innerRadius: "20%",
y: this.responseSolidgauge[4].count,
},
],
},
]
},
function callback() {
});