配置项如下
var datas = {
title: "呼叫接通率",
company: "%",
dataArr: [{
value: "80"
}]
};
var fontColor = "#000";
var seriesName = "";
let noramlSize = 16;
// let myChart = echarts.init(dom);
var value = datas.dataArr[0].value;
var min = value.split(".");
var max = 100;
var degrees = 180 - (180 * value) / max; //蓝色刻度尺计算
// 蓝色背景
var num = value / max;
var colorSet = [
[num, "#3FAFF5"],
[1, "#e6e6e6"]
];
var centerArr = ["50%", "85%"];
option={
backgroundColor:'#fff',
series: [{
name: "白色圈刻度",
type: "gauge",
radius: "100%",
splitNumber: 6,
center: centerArr,
startAngle: 180, //刻度起始
endAngle: 0, //刻度结束
z: 4,
axisTick: {
show: false
},
splitLine: {
length: 35, //刻度节点线长度
lineStyle: {
width: 5,
color: "#fff"
} //刻度节点线
},
axisLabel: {
show: false,
color: "#",
fontSize: 12
}, //刻度节点文字颜色
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
{
name: "最外圈数字刻度",
type: "gauge",
z: 2,
radius: "125%",
splitNumber: 6,
startAngle: 180,
endAngle: 0,
min: 0,
max: max,
center: centerArr, //整体的位置设置
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
// color: [[0.8, "#00B3FE"], [1, "#212D43"]],
width: 25,
opacity: 0 //刻度背景宽度
}
},
splitLine: {
show: false
},
data: [{
show: false,
value: "80"
}],
axisLabel: {
show: true,
textStyle: {
color: "#3FAFF5",
fontSize: noramlSize
},
formatter: "{value}" + datas.company
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
{
name: "紫色外圈", //刻度背景
type: "gauge",
z: 2,
radius: "100%",
splitNumber: 6,
startAngle: 180,
endAngle: 0,
min: 0,
max: max,
center: centerArr, //整体的位置设置
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: colorSet,
width: 25,
opacity: 1 //刻度背景宽度
}
},
splitLine: {
show: false
},
data: [{
show: false,
value: "80"
}],
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
{
name: "紫色刻度尺", //刻度背景
type: "gauge",
z: 4,
radius: "85%",
splitNumber: 4,
startAngle: 180,
endAngle: degrees,
center: centerArr, //整体的位置设置
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [
[0.8, "#00B3FE"],
[1, "#212D43"]
],
width: 25,
opacity: 0 //刻度背景宽度
}
},
data: datas.dataArr,
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: "#3FAFF5",
width: 3
},
length: 8,
splitNumber: 6
},
detail: {
formatter: function(params) {//图表中间文字数据展示
return (
"{gray|" + datas.title + "\n" + "}{white|" + value + "} {company|" + datas.company + "}"
);
},
rich: {
gray: {
fontSize: 20,
color: "#000",
padding: 20
},
white: {
fontSize: 45,
fontWeight: 700,
color: "#000"
},
company: {
fontSize: 14,
color: "#000"
}
},
offsetCenter: ["0", "-30%"]
},
splitLine: {
length: 25, //刻度节点线长度
lineStyle: {
width: 2,
color: "#3FAFF5"
} //刻度节点线
}
}
]
};