代码：
const value = 0.25 // 外层圆的数值
const centerLabel = {
name: '文字123',
value: 1234,
unit: '单位'
}
option = {
series: [
{
// 外层圆
type: 'pie',
radius: ['80%', '83%'],
center: ['50%', '50%'],
silent: true, // 图形不响应和触发鼠标事件
min: 0,
max: 1,
data: [{
value: Math.floor((Math.abs(value) * 100)),
itemStyle: {
color: '#d0021b',
borderCap: 'round',
borderRadius: '100%'
},
label: {
show: false
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 0
}
}
},
hoverAnimation: false
},
{
label: {
show: false
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 0
}
}
},
value: 100 - Math.floor((Math.abs(value) * 100)),
hoverAnimation: false,
itemStyle: {
color: '#e6e6e6',
emphasis: {
// 鼠标移入不高亮
color: '#e6e6e6'
}
}
}
]
},
{
// 内部的饼图
type: 'pie',
radius: ['60%', '70%'],
avoidLabelOverlap: false,
emphasis: {
// disabled: true
label: {
}
},
labelLine: {
show: false
},
label: {
show: true,
formatter: [`{a|${
centerLabel.value}}{b|${
centerLabel.unit}}`, `{c|}`, `{d|${
centerLabel.name}}`].join('\n'),
position: 'center',
rich: {
a: {
fontSize: 72,
color: '#333',
textAlign: 'center',
padding: [0, 0, 12, 0]
},
b: {
padding: [8, 6, 6, 6],
fontSize: 20,
color: '#666',
verticalAlign: 'top'
},
c: {
width: '100%',
height: 2,
backgroundColor: '#dadde4',
align: 'left'
},
d: {
fontSize: 36,
color: '#999',
padding: [20, 0, 12, 0]
}
}
},
data: [
{
value: 1048,
name: 'Search Engine',
itemStyle: {
borderCap: 'round',
borderRadius: '100%',
borderWidth: 10, //边框的宽度
borderColor: '#fff' //边框的颜色
}
},
{
value: 735,
name: 'Direct',
itemStyle: {
borderCap: 'round',
borderRadius: '100%',
borderWidth: 10, //边框的宽度
borderColor: '#fff' //边框的颜色
}
},
{
value: 580,
name: 'Email',
itemStyle: {
borderCap: 'round',
borderRadius: '100%',
borderWidth: 10, //边框的宽度
borderColor: '#fff' //边框的颜色
}
}
]
}
]
}
最终效果：
