**1. 设置两个series,一个series正常显示圆环图，另外一个圆环图设置背景图，通过label的富文本自定义样式来设置背景图
- 设置第二个圆环：
- 在data中设置value为100%，
- 设置label的自定义富文本，并设置文字居中显示，位置居中显示
- 关于背景图的宽高设置，通过echarts获取画布的大小，根据看图得知位置偏左，width/2 - (减去grid.left,自行调整)
- 并把当前(第二个)圆环图的层级设置低一点,例如：z:1，圆环图默认的层级是2，所以第二个层级设置成1
2. 想要缩放的时候依旧保持原来不变, 通过监听浏览器窗口大小变化事件，把option在设置一遍
原图：
demo图：
核心代码：
{
type: 'pie',
center: ['30%', '50%'],
radius: ['60%', '60%'],
hoverAnimation:false,
silent:true
data: [{
value: 100,
z: 1,
label: {
show: true,
position: 'center',
formatter: () => {
return `{bg|}`
},
rich: {
bg: {
left: 'center',
width: (width / 2)-10,
height: (width / 2)-10,
backgroundColor: {
image: './pie-center-bg.png'
}
}
}
}
}],data: [{
value: 100,
z: 1,
label: {
show: true,
position: 'center',
formatter: () => {
return `{bg|}`
},
rich: {
bg: {
left: 'center',
width: (width / 2)-10,
height: (width / 2)-10,
backgroundColor: {
image: './pie-center-bg.png'
}
}
}
}
}],
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.js"></script>
<!-- <script src="./node_modules/requirejs/re"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
<script type="text/javascript" src="https://requirejs.org/docs/release/2.3.6/r.js"></script>
</head>
<body>
<div id="echarts01" style="width: 600px;height: 400px;background-color: #0e1842;"></div>
<script>
const echartDom = document.getElementById('echarts01')
const mychart = echarts.init(echartDom)
const data = [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
const width = mychart.getWidth()
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
grid: {
bottom: '10px',
left: '10px',
},
series: [
{
type: 'pie',
center: ['30%', '50%'],
radius: ['50%', '60%'],
data: data,
emphasis: {
label: {
show: true
}
},
z:10,
backgroundColor:'transparent',
label: {
show: false,
color: '#fff',
position: 'center',
formatter: (params) => {
return `{num|${params.percent}%}\n\n{name|${params.name}}`
},
rich: {
color: '#fff',
name: {
fontSize: 14,
},
num: {
fontSize: 18,
fontWeight: 'bolder',
}
}
}
},
{
type: 'pie',
center: ['30%', '50%'],
radius: ['60%', '60%'],
hoverAnimation:false,//鼠标经过的动画
animation:false,
selectedMode:false,
silent:true, //不响应和触发鼠标事件
tooltip: {
show: false
},
itemStyle:{
normal:{
label:{show:false},
labelLine:{show:false},
color:'rgba(255,144,0,0.4)'
}
},
data: [{
value: 100,
z: 1,
label: {
show: true,
position: 'center',
formatter: () => {
return `{bg|}`
},
rich: {
bg: {
left: 'center',
width: (width / 2)-10,
height: (width / 2)-10,
backgroundColor: {
image: './pie-center-bg.png'
}
}
}
}
}],
}
]
};
mychart.setOption(option)
function resizeEcharts() {
mychart.setOption(option)
}
window.addEventListener('resize', resizeEcharts)
</script>
</body>
</html>
