var dataArr = 50;
var colorSet = '#45CAED';
var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FF0000',
},
{
offset: 0.4,
color: '#FFB800',
},
{
offset: 1,
color: '#00FF75',
},
]);
var option = {
backgroundColor:"#000",
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
// 刻度
{
type: 'gauge',
radius: '80%',
startAngle: 220,
endAngle: -40,
center: ['50%', '50%'],
axisTick: {
show: false,
lineStyle: {
color: '#000',
width: 1,
},
length: 1,
},
//刻度样式
splitLine: {
show: true,
lineStyle: {
color: '#57DCFF',
width: 1,
},
length: -6,
},
//分隔线样式
axisLabel: {
color: 'rgba(255,255,255,0)',
fontSize: 12,
},
//刻度节点文字颜色
pointer: {
show: false,
},
axisLine: {
show: false,
},
label: {
show: false,
},
//仪表盘内容
detail: {
show: true,
offsetCenter: [0, '90%'],
color: '#ACCFFF',
formatter: function (params) {
return '安全指数';
},
textStyle: {
fontSize: 16,
},
},
},
{
type: 'gauge',
name: '外圈',
radius: '80%',
startAngle: '225',
endAngle: '-45',
center: ['50%', '50%'],
min: 0,
max: 100,
splitNumber: 4,
// splitNumber: '100',
pointer: {
show: false
},
detail: {
show: false,
},
data: [{
value: 1
}],
// data: [{value: 1, name: 90}],
title: {
show: true,
offsetCenter: [0, 30],
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: 20,
}
},
axisLine: {
show: true,
lineStyle: {
color: [
[1, '#57DCFF']
],
width: 2,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: -44,
lineStyle: {
color: '#000',
width: 0,
type: 'solid',
},
},
axisLabel: {
show: false,
formatter: function(value) { return value + '%'},
fontSize: 20
},
},
{
name: '进度条',
type: 'gauge',
center: ['50%', '50%'],
radius: '75%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr/100 , color],
[1, 'rgba(107,157,215,.25)'],
],
width: 10,
},
},
z: 4,
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
color: colorSet,
},
detail: {
show: false,
},
label: {
show: false,
},
title: {
//标题
show: true,
offsetCenter: [0, 0], // x, y，单位px
textStyle: {
color: '#FFF',
fontSize:38, //表盘上的标题文字大小
fontWeight: 400,
fontFamily: 'Helvetica-BoldOblique-Regular, Helvetica-BoldOblique',
},
},
data: [
{
name: '127.4',
value: dataArr,
},
],
pointer: {
show: false,
length: '40%',
radius: '20%',
width: 4, //指针粗细
},
},
{
type: 'gauge',
name: '内圈',
radius: '65%',
startAngle: '312.99',
endAngle: '-47',
center: ['50%', '50%'],
min: 0,
max: 100,
splitNumber: 4,
// splitNumber: '100',
pointer: {
show: false
},
detail: {
show: false,
},
data: [{
value: 1
}],
// data: [{value: 1, name: 90}],
title: {
show: true,
offsetCenter: [0, 30],
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: 20,
}
},
axisLine: {
show: true,
lineStyle: {
color: [
[1, '#162B55']
],
width: 2,
opacity: 1
}
},
axisTick: {
show: true,
lineStyle: {
color: '#16687B',
width: 1,
},
length: 8,
},
splitLine: {
show: true,
length: -44,
lineStyle: {
color: '#051932',
width: 0,
type: 'solid',
},
},
axisLabel: {
show: false,
formatter: function(value) { return value + '%'},
fontSize: 20
},
},
// 外一层圈
{
type: 'pie',
radius: '60%',
startAngle: 220,
endAngle: -40,
hoverAnimation: false,
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: 1,
},
],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#194280',
},
{
offset: 1,
color: '#194280',
},
],
},
opacity: 0.12,
},
},
},
// 内圆
{
type: 'pie',
radius: ['0', '50%'],
center: ['50%', '50%'],
hoverAnimation: false,
z: 3,
data: [
{
value: dataArr,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#4B72E5',
},
{
offset: 1,
color: '#1C2755 ',
},
]),
opacity: 0.6,
},
},
label: {
show: false,
},
},
],
labelLine: {
show: false,
},
},
],
};