var dataArr = 55 //完成
var dataArr2 = 86 //计划
var colorSet = {
color: "#0D4B99"
};
var color1 = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,255,255,0.1)" //小得刻度线
},
{
offset: 1,
color: "rgba(255,255,255,0.3)"
}
],
global: false
};
// 椭圆得颜色 刻度线得旁边
var color2 = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "#FF9900"
},
{
offset: 1,
color: "#FFD511"
}
],
global: false
};
option = {
backgroundColor: '#0E1327',
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: "内部进度条",
type: "gauge",
// center: ['20%', '50%'],
radius: "80%", //最外层放大
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, colorSet.color],
[1, colorSet.color]
],
width: 2
}
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
itemStyle: {
color: "#1F6CF7"
},
detail: {
show: false,
formatter: function (value) {
if (value !== 0) {
var num = Math.round(value);
return parseInt(num).toFixed(0) + "%";
} else {
return 0;
}
},
offsetCenter: [0, 67],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 18,
fontWeight: "700",
color: "#ffffff"
}
},
title: {
//标题
show: false,
offsetCenter: [0, 46], // x, y，单位px
textStyle: {
color: "rgba(0,0,0,0)",
fontSize: 14, //表盘上的标题文字大小
fontFamily: "PingFangSC"
}
},
data: [
{
name: "",
value: dataArr
}
],
pointer: {
show: true,
length: "70%",
radius: "20%",
width: 3 //指针粗细
},
animationDuration: 4000
},
{
name: "内部阴影",
type: "gauge",
radius: "64%",
// splitNumber: 20,
axisLine: {
lineStyle: {
color: [
[
dataArr / 100,
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#03174D"
},
{
offset: 0.5,
color: "#2574C5"
},
{
offset: 1,
color: "#021B5A"
}
])
],
[
dataArr2 / 100,
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#2574C5"
},
{
offset: 0.5,
color: "#2574C5"
},
{
offset: 1,
color: "#2574C5"
}
])
],
[
1,
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#FFCF5F"
},
{
offset: 0.5,
color: "#FFCF5F"
},
{
offset: 1,
color: "#FFB811"
}
])
]
],
width: 30
}
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
itemStyle: {
show: false
}
},
{
name: "内部小圆",
type: "gauge",
// center: ['20%', '50%'],
radius: "66%",
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, color2],
[1, "rgba(0,0,0,0)"]
],
width: 5 //黄色得宽度
}
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
itemStyle: {
show: false
}
},
{
name: "外部刻度",
type: "gauge",
// center: ['20%', '50%'],
// radius: '63%',
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 5, //刻度数量
startAngle: 225,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [[1, "rgba(0,0,0,0)"]]
}
}, //仪表盘轴线
axisLabel: {
show: true,
color: "#ffffff",
fontSize: 14,
fontFamily: "SourceHanSansSC-Regular",
fontWeight: "bold",
// position: "top",
distance: -23, //20 40 60 距离中心得位置
formatter: function (v) {
switch (v + "") {
case "0":
return "0";
case "10":
return "10";
case "20":
return "20";
case "30":
return "30";
case "40":
return "40";
case "50":
return "50";
case "60":
return "60";
case "70":
return "70";
case "80":
return "80";
case "90":
return "90";
case "100":
return "100";
}
}
}, //刻度标签。
axisTick: {
show: false,
splitNumber: 3,
lineStyle: {
color: color1, //用颜色渐变函数不起作用
width: 1
},
length: -6
}, //刻度样式
splitLine: {
show: true,
length: -10,
lineStyle: {
width: 1,
color: color1 //用颜色渐变函数不起作用
}
}, //分隔线样式
detail: {
show: false
}
},
{
name: "内部进度条",
type: "gauge",
// center: ['20%', '50%'],
radius: "6%",
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, colorSet.color],
[1, colorSet.color]
],
width: 1
}
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
itemStyle: {
color: "#ffffff"
},
detail: {
formatter: function (value) {
if (value !== 0) {
var num = Math.round(value);
return parseInt(num).toFixed(0);
} else {
return 0;
}
},
offsetCenter: [0, 47],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 30,
color: "#FF8C11" //仪表盘下面得数据
}
},
title: {
//标题
show: true,
offsetCenter: [0, 46], // x, y，单位px
textStyle: {
color: "#fff",
fontSize: 14, //表盘上的标题文字大小
fontWeight: 400,
fontFamily: "MicrosoftYaHei"
}
},
data: [
{
// name: "去年优良率",
value: dataArr,
itemStyle: {
color: "#ffffff",
fontFamily: "MicrosoftYaHei",
fontSize: 14
}
}
],
pointer: {
show: true,
length: "70%",
radius: "10%",
width: 3 //指针粗细
},
animationDuration: 4000
},
{
//指针上的圆
type: "pie",
tooltip: {
show: false
},
hoverAnimation: false,
legendHoverLink: false,
radius: ["0%", "4%"],
center: ["50%", "50%"],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 120,
itemStyle: {
normal: {
color: "#1F6CF7"
}
}
}
]
}
]
};