option = {
backgroundColor:'#999',
series: [
{ //第一个
type: 'gauge',
radius: '50%', //仪表盘半径
min: 0,
max: 200,
splitNumber: 10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 2,
color: [
[0.1, '#eee'],
[0.3, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: '#eee'
}, {
offset: 0.8,
color: 'rgb(13,211,97)'
}]
)],
[0.5, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'rgb(13,211,97)'
}, {
offset: 0.8,
color: 'rgb(235,205,6)'
}]
)],
[0.9, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: '#f00'
}, {
offset: 0.8,
color: 'rgb(235,205,6)'
}]
)],
[1, '#f00']
],
}
},
progress: { //进度条
show:false
},
splitLine:{ // 刻度线分界点
distance: 0,
length:12,
itemStyle: {
color: 'inherit'
},
},
axisTick:{ // 小刻度线
show:false
},
pointer:{
show: false, //是否显示指针
},
axisLabel: { // 刻度数值
color: 'inherit',
distance: 10,
fontSize: 16
},
detail: { // 是否显示数据详情
show:false,
},
title: {
show:false,
},
},
{ // 第二个
type: 'gauge',
radius: '56%', //仪表盘半径
min: 0,
max: 200,
splitNumber: 10,
axisLine: { // 坐标轴线
show:false,
},
progress: { //进度条
show: true, // 是否显示
roundCap: false, //是否圆角
width: 20, // 宽度
itemStyle: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(100,200,228,1)'
},
{
offset: 0.5,
color: 'rgba(48,62,245,1)'
},
{
offset: 1,
color: 'rgba(48,62,245,1)'
}]
)
}
},
splitLine:{ // 刻度线分界点
show:false,
},
axisTick:{ // 小刻度线
show:false
},
pointer:{
show: false, //是否显示指针
},
axisLabel: { // 刻度数值
show:false,
},
detail: { // 是否显示数据详情
valueAnimation: true, // 开启动画
fontSize: 70,
fontFamily: 'DIN Alternate',
offsetCenter: [0, '-18%'],
color: 'inherit'
},
title: {
offsetCenter: [0, '10%'],
fontSize: 20,
color: '#000'
},
data: [
{
value: 90,
name: '空气质量'
}
]
},
{ //第三个
type: 'gauge',
radius: '65%',
axisLine:{
show:false
},
progress: {
show: false,
},
splitLine:{
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
length: 10,
splitNumber: 20,
lineStyle: {
color: '#eee',
width: 1
}
},
pointer:{
show:false,
},
detail: {show:false},
},
{ //第四个
type: 'gauge',
radius: '70%',
axisLine: {
lineStyle: {
color:[[1, '#eee']],
width: 20,
opacity: 0.1
},
show: true
},
progress: {
show: false,
},
splitLine:{
distance: -20,
length: 20,
lineStyle: {
color: '#eee',
opacity: 0.1
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
pointer:{
show:false,
},
detail: {show:false},
},
{ // 第五个，左边进度条
type: 'gauge',
radius: '82%',
startAngle: 210,
endAngle: 150,
min: 0,
max: 50,
axisLine: {
show: false,
},
progress: {
show: true, // 是否显示
roundCap: false, //是否圆角
width: 16, // 宽度
itemStyle: {
opacity: 0.9,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: 'rgb(13,211,97)'
},
{
offset: 0.5,
color: 'rgba(48,62,245,1)'
},
{
offset: 1,
color: 'rgb(235,205,6)'
}]
)
}
},
splitLine:{
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
length: 14,
distance: -9,
lineStyle: {
color: '#eee',
width: 1
}
},
pointer:{
show:false,
},
detail: { // 是否显示数据详情
valueAnimation: true, // 开启动画
fontSize: 40,
fontFamily: 'DIN Alternate',
offsetCenter: ['-120%', '18%'],
formatter: '{value} ℃',
color: 'inherit'
},
data: [
{
value: 26,
name: ''
}
]
},
{ // 第六个，右边进度条
type: 'gauge',
radius: '80%',
startAngle: -30,
endAngle: 30,
min: 0,
max: 100,
clockwise: false, //逆时针增长
axisLine: {
show: false,
},
progress: {
show: true, // 是否显示
roundCap: false, //是否圆角
width: 16, // 宽度
itemStyle: {
opacity: 0.9,
color: '#f00'
}
},
splitLine:{
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
length: 14,
distance: -10,
lineStyle: {
color: '#eee',
width: 1
}
},
pointer:{
show:false,
},
detail: { // 是否显示数据详情
valueAnimation: true, // 开启动画
fontSize: 40,
fontFamily: 'DIN Alternate',
offsetCenter: ['120%', '18%'],
formatter: '{value} %',
color: 'inherit'
},
data: [
{
value: 10,
name: ''
}
]
}
]
};