效果图:
代码:
$(function(){
// 异动统计
drawMoveStatistics('move-topo-one',26,'#7067dd','#54b9f9','#7067dd');
drawMoveStatistics('move-topo-two',69,'#EC65B4','#FB8E8F','#EC65B4');
drawMoveStatistics('move-topo-three',72,'#459DD7','#36D7D7','#459DD7');
})
// 异动统计
function drawMoveStatistics(elId,num,leftColor,rightColor,numColor){
var normal=100,all=100;
var option = {
series: [
{
name: "刻度",
type: "gauge",
center: ["50%", "70%"],
radius: '80%',
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 200,
endAngle: -20,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [
[1, "rgba(0,0,0,0)"]
],
},
}, //仪表盘轴线
axisLabel: {
show: true,
color: "#4b695e",
fontSize: 15,
distance: -50,
formatter: function(v) {
return v;
},
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 1,
lineStyle: {
color: "#263b35",
width: 1,
// length:10
},
length: -10,
}, //刻度样式
splitLine: {
show: true,
length: 18,
lineStyle: {
color: "#4aca96",
width: 1
},
}, //分隔线样式
},
{
type: "gauge",
radius: '80%',
center: ["50%", "70%"],
splitNumber: 0, //刻度数量
startAngle: 200,
endAngle: -20,
axisLine: {
show: true,
lineStyle: {
width: 20,
color: [
[
1, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: leftColor,
},
{
offset: 1,
color: rightColor,
}
]
)
],
],
},
},
//分隔线样式。
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: true,
length: "80%",
width: "2%",
},
title: {
show: true,
offsetCenter: [0, "10%"], // x, y,单位px
textStyle: {
fontWeight: "bold",
color: "#0ab7ff",
fontSize: 30,
},
},
//仪表盘详情,用于显示数据。
detail: {
show: true,
offsetCenter: [0, "25%"],
color: "black",
textStyle: {
fontSize: 20,
color: numColor
},
},
data: [{
value: num,
}, ],
}
],
};
// 共通代码,需要置换
_WOO.c.drawEchart(elId,option);
}