image.png
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: { // 刻度數(shù)值
color: 'inherit',
distance: 10,
fontSize: 16
},
detail: { // 是否顯示數(shù)據(jù)詳情
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: { // 刻度數(shù)值
show:false,
},
detail: { // 是否顯示數(shù)據(jù)詳情
valueAnimation: true, // 開啟動畫
fontSize: 70,
fontFamily: 'DIN Alternate',
offsetCenter: [0, '-18%'],
color: 'inherit'
},
title: {
offsetCenter: [0, '10%'],
fontSize: 20,
color: '#000'
},
data: [
{
value: 90,
name: '空氣質(zhì)量'
}
]
},
{ //第三個
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: { // 是否顯示數(shù)據(jù)詳情
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: { // 是否顯示數(shù)據(jù)詳情
valueAnimation: true, // 開啟動畫
fontSize: 40,
fontFamily: 'DIN Alternate',
offsetCenter: ['120%', '18%'],
formatter: '{value} %',
color: 'inherit'
},
data: [
{
value: 10,
name: ''
}
]
}
]
};
