var data_value = 100
option = {
backgroundColor: "#000", //背景色
tooltip: {
show: false,
trigger: 'item'
},
angleAxis: {
show: false,
max: (100 * 360) / 270,
type: 'value',
startAngle: 225,
splitLine: {
show: false
}
},
// 圆环宽度
barMaxWidth: 10,
radiusAxis: {
show: false,
type: 'category',
z: 10
},
polar: {
// 圆环大小
radius: '100%'
},
series: [
// 内容圆环
{
name: '',
type: 'gauge',
min: 0,
max: 100,
splitNumber: 5,
radius: '80%', // 图表尺寸
center: ['50%', '50%'],
detail: {
formatter: '{r1|{value}}{r2|%}',
color: 'auto',
rich: {
r1: {
fontSize: 20,
verticalAlign: 'bottom',
padding: [0, 5, -2, 0]
},
r2: {
fontSize: 20,
verticalAlign: 'bottom'
}
}
},
title: {
show: true,
offsetCenter: [0, '90%'], // x, y，单位px
textStyle: {
color: '#FFF',
fontSize: 22
}
},
anchor: {
show: true,
showAbove: true,
size: 10,
itemStyle: {
borderWidth: 4
// borderColor: '#3DE6FF'
}
},
pointer: {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '80%',
width: 5,
offsetCenter: [0, '3%']
},
progress: {
roundCap: true,
show: false,
width: 0
},
itemStyle: {
color: '#3DE6FF'
},
data: [
{
value: data_value,
name: '',
}
],
axisLine: {
show: true,
lineStyle: {
width: 0,
color: [
[0.05, '#1b6dff'],
[0.10, '#2084ff'],
[0.15, '#2596ff'],
[0.20, '#2db0ff'],
[0.25, '#31c0ff'],
[0.30, '#36d3ff'],
[0.35, '#4fe6ec'],
[0.40, '#6ae7d2'],
[0.45, '#84e8b9'],
[0.50, '#a5e999'],
[0.55, '#ccea75'],
[0.60, '#f8eb4a'],
[0.65, '#ffdd4f'],
[0.70, '#ffcb5a'],
[0.75, '#ffae6e'],
[0.80, '#ff9c7b'],
[0.85, '#ff8d87'],
[0.90, '#ff7d91'],
[0.95, '#ff6f9b'],
[1, '#ff5ca9']
]
}
},
axisTick: {
show: true,
lineStyle: {
width: 5,
color: 'auto',
},
length: 10,
splitNumber: 10
},
//分割线样式
splitLine: {
show: true,
length: -5,
lineStyle: {
width: 5.2,
color: 'auto',
}
},
axisLabel: {
distance: 30,
color: 'auto',
fontSize: 24
}
},
{
type: 'bar',
data: [
{
value: 100,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: '#0A5EFF' },
{ offset: 0.45, color: '#20DDFF' },
{ offset: 1, color: '#FC10CB' }
])
}
}
],
barGap: '-100%',
coordinateSystem: 'polar',
roundCap: true,
z: 20
},
{
type: 'pie',
labelLine: {
show: false
},
z: 4,
radius: 10,
data: [
{
value: 20,
itemStyle: {
color: '#3DE6FF'
}
}
]
},
{
type: 'pie',
labelLine: {
show: false
},
z: 3,
radius: ['8%', '10%'],
center: ['50%', '50%'],
data: [
{
value: 100,
itemStyle: {
color: '#3DE6FF',
opacity: 0.5
}
}
]
}
]
};
setInterval(function () {
myChart.setOption({
series: [
{
data: [
{
value: +(Math.random() * 100).toFixed(2),
r1: +(Math.random() * 100).toFixed(2)
}
]
}
]
});
}, 2000);