var datas = {
value: 82,
title: "任务完成占比",
type: 1,
radiusType: 1
};
let startAngle=180,endAngle=0;
var fontColor = "#00f6f7";
var seriesName = "";
let noramlSize = 16;
let state = "";
let center = ["50%", "55%"];
let wqradius = 0,
nqradius = 0,
kdradius;
wqradius = "60%";
nqradius = "60%";
kdradius = "90%";
let min=0,max=100;
let nqColor = [
[
datas.value/100,
"rgba(201, 174, 60,0.2)"
],
[
1,
"rgba(3, 169, 159,0)"
]
];
let wqColor = "rgba(22, 138, 255, 0.9)";
let circleLineW=2;
myChart.setOption({
// backgroundColor:"#000",
title: {
show: true,
x: "center",
bottom: "40%",
text: datas.title,
textStyle: {
// fontWeight: "700",
fontSize: 16,
color: '#fff'
}
},
tooltip: {
show: false
},
series: [
{
type: "gauge",
radius: "70%",
splitNumber: 4, //刻度数量
min: 0,
max: 100,
startAngle,
endAngle,
center,
pointer: {
show: false,
},
// data: dataArr,
title: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "rgb(4, 145, 139)",
width: 35,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
},
axisTick: {
show: true,
splitNumber: 10,
length: 100,//刻度线长度
lineStyle: {
width: 1,
color: "#3c4543",
},
},
splitLine: {
length:0, //刻度节点线长度
lineStyle: {
width: 1,
color: "#20c998",
}, //刻度节点线
},
axisLabel: {
show: true,
distance:0,
textStyle: {
color: '#ffffff',
fontSize: "14",
// fontWeight: "bold"
}
},
detail: {
show: 0,
},
animationDuration: 4000,
},{
name: "白色圈刻度",
type: "gauge",
radius: kdradius,
center,
startAngle, //刻度起始
endAngle, //刻度结束
z: 7,
splitNumber: 5,
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false,
color: fontColor,
fontSize: noramlSize,
formatter: "{value}%"
}, //刻度节点文字颜色
pointer: {
show: false
},
axisLine: {
show: false
},
detail: {
show: false
}
},
{
name: "外层圈", //刻度背景
type: "gauge",
z: 2,
radius: wqradius,
startAngle,
endAngle,
center, //整体的位置设置
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [
[1, 'skyblue']
],
width: circleLineW,
opacity: 1 //刻度背景宽度
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
{
name: "指针",
type: "gauge",
z: 9,
radius: "100%",
startAngle,
endAngle,
center, //整体的位置设置
axisLine: {
show:false,
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
min,
max,
//指针样式位置
pointer: {
show: true,
width: 5,
length: "25%",
offsetCenter: [0,-142],
},
itemStyle: {
normal: {
color: 'yellow'
}
},
detail: {
show: true,
offsetCenter: [0, -25],
formatter: [
"{value|" + (datas.value) + " }"+"{percent|" + '%' + " }"
].join("\n"),
rich: {
value: {
fontSize: 30,
lineHeight: 10,
color: '#ffffff',
fontWeight: "700"
},
percent: {
fontSize: 20,
lineHeight: 10,
color: '#ffffff',
fontWeight: "700"
}
}
},
data: [datas.value] //指针位置
},
{
name: "内层盘",
type: "gauge",
z: 6,
radius: nqradius,
startAngle,
endAngle,
center, //整体的位置设置
axisLine: {
lineStyle: {
// 属性lineStyle控制线条样式//控制外圈位置
color: nqColor,
width: 96,
opacity: 0.9 //控制外圈位置，颜色，宽度，透明度
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
show: 0
}
},
{
name: "中间小环",
type: "gauge",
z: 6,
radius: "50%",
startAngle,
endAngle,
center: center, //整体的位置设置
axisLine: {
lineStyle: {
// 属性lineStyle控制线条样式//控制外圈位置
color: [
[
datas.value/100, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: '#6fed5c'
},
{
offset: 1,
color: '#b2f268'
}
]
)]
],
width:23,
// opacity: 0.9 //控制外圈位置，颜色，宽度，透明度
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
show: 0
}
},
{
name: "内层小环",
type: "gauge",
z: 10,
radius: "35%",
startAngle,
endAngle,
center: center, //整体的位置设置
axisLine: {
lineStyle: {
// 属性lineStyle控制线条样式//控制外圈位置
color: [
[1, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: '#6fed5c'
},
{
offset: 1,
color: '#396aff'
}
]
)]
],
width:10,
// opacity: 0.9 //控制外圈位置，颜色，宽度，透明度
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
show: 0
}
}
]
});
var bgColor = "#222939"
var highlight = '#05c7c9'
var value = 1.5
option = {
backgroundColor: bgColor,
title: {
text: '{a|'+ 50+ ' ' +'}{c|%}',
x: 'center',
y: 'center',
textStyle: {
rich:{
a: {
fontSize: 48,
color: '#ffffff',
fontWeight:'bold'
},
c: {
fontSize: 20,
color: '#ffffff',
fontWeight:'bold'
// padding: [5,0]
}
}
}
},
series: [
{
name: '刻度',
type: 'gauge',
center: ['50%', '55%'], // 默认全局居中
splitNumber: 4, //刻度数量
min: 0,
max: 100,
startAngle: 180,
endAngle: 0,
clockwise: true,
axisLine: {
show: true,
lineStyle: {
width: 2,
shadowBlur: 0,
color: [
[1, highlight]
]
}
},
axisTick: {
show: false,
// lineStyle: {
// color: highlight,
// width: 1
// },
// length: 8,
// splitNumber: 10
},
splitLine: {
show: false,
length: -7,
lineStyle: {
color: highlight,
}
},
axisLabel: {
distance: -20,
textStyle: {
color: '#ffffff',
fontSize: "14",
fontWeight: "bold"
}
},
pointer: { //仪表盘指针
show: 0
},
detail: {
show: false
}
},
{
name: '标尺',
center: ['50%', '55%'], // 默认全局居中
type: 'gauge',
radius: '61%',
splitNumber: 0, //刻度数量
startAngle: 180,
endAngle: 0,
axisLine: {
lineStyle: {
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 15,
color: [
[
(value/4), new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: '#6fed5c'
},
{
offset: 1,
color: '#b2f268'
}
]
)
],
]
}
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
show: false
},
pointer: {
show: true
}
},
{
name: '数值',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius: '43%',
center: ['50%', '55%'], // 默认全局居中
min: 0,
max: 4,
splitNumber: 0,
axisLine: { // 坐标轴线
lineStyle: {
color: [
[
1, new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: '#6fed5c'
},
{
offset: 1,
color: '#396aff'
}
]
)
],
], // 属性lineStyle控制线条样式
width: '1%'
}
},
axisLabel: { // 坐标轴小标记
show: false
},
splitLine: { // 分隔线
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: 0
}
},
pointer: { // 分隔线 指针
color: 'red',
width: '10%',
length: '170%'
},
detail: {
show: true
},
data: [{
name: "",
value: value
}],
z: 2
},
{
name: '遮罩',
tooltip:{
show:true
},
type: 'pie',
radius: '40%',
center: ['50%', '55%'], // 默认全局居中
hoverAnimation:false,
itemStyle:{
normal:{
color: bgColor
},
emphasis:{
color: bgColor
}
},
labelLine:{
normal:{
show:false
}
},
animation:false,
data: [1.9],
}
]
};
扫一扫
229
到【灌水乐园】发言
