这里只贴了 echarts 中的 option 代码
const option = {
//你的代码
color: ['#FFC824', '#E2657A', '#67F1CC', '#4CB9F7', '#D6EAF2', '#9253DF'],
title: {
text: 500,
subtext: '数量',
// sitemGap: 20,
x: 'center',
y: '25%',
textStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#FFF'
},
subtextStyle: {
fontSize: 16,
fontWeight: 'normal',
align: 'center',
color: '#FFF'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
width: '70%',
orient: 'horizontal',
bottom: '5%',
itemWidth: 10,
itemHeight: 10,
itemGap: 20,
textStyle: {
color: '#ffffff',
fontSize: 14
}
},
series: [
{
name: '上市企业分布',
type: 'pie',
selectedMode: 'single',
center: ['50%', '35%'],
radius: ['30%', '40%'],
label: {
padding: [80, 0, -80, -20],
formatter: '{b}\n\n{c}',
color: '#fff',
fontSize: 12,
position: 'outside',
padding: [0, -40, 0, -30]
},
labelLine: {
length: 10,
length2: 70,
show: true,
color: '#00ffff',
fontSize: 15
},
data: [{ name: 'aaa', value: '30' }, { name: 'bbb', value: '3' }, { name: 'ccc', value: '10' }, { name: 'ddd', value: '20' }]
},
{
color: ['#163d59'],
type: 'gauge',
center: ['50%', '35%'],
startAngle: 150,
endAngle: -209.999,
splitNumber: 12,
radius: '20%',
pointer: {
show: false
},
progress: {
show: false,
roundCap: true,
width: 1
},
axisLine: {
show: false,
lineStyle: {
width: 10,
color: [
[0, '#163d59'],
[0.5, '#163d59'],
[1, '#163d59']
]
}
},
axisTick: {
distance: -25,
length: 12,
splitNumber: 5,
lineStyle: {
width: 2,
color: 'rgba(0, 0, 0, 0.05)'
}
},
splitLine: {
show: false,
distance: -35,
length: 10,
lineStyle: {
width: 2,
color: '#099fe4'
}
},
axisLabel: {
show: false
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
show: false
},
data: []
},
{
// 外层阴影圈
name: '阴影圈',
type: 'pie',
radius: ['40%', '50%'],
center: ['50%', '35%'],
emphasis: {
scale: false
},
tooltip: {
show: false
},
itemStyle: {
normal: {
labelLine: {
show: false
},
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
offset: 1,
color: 'rgba(46, 114, 156, 0.0374)'
},
{
offset: 0.5,
color: 'rgba(149, 214, 255, 0.17)'
},
{
offset: 0,
color: 'rgba(46, 114, 156, 0.0374)'
}
]),
shadowBlur: 60
}
},
labelLine: {
show: false
},
data: [100]
}
]