我首先找了一个官方示例做例子。
圆角环形饼图：https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius&lang=js
查阅官方文档得知深色模式根据backgroundColor这个属性进行自适应。
darkmode：
是否是暗黑模式，默认会根据背景色 backgroundColor 的亮度自动设置。 如果是设置了容器的背景色而无法判断到，就可以使用该配置手动指定，echarts 会根据是否是暗黑模式调整文本等的颜色。
该配置通常会被用于主题中。backgroundColor：
背景色，默认无背景。
支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充，具体见option.color文档反正我就明白了一个背景色默认无背景，真的有点迷迷糊糊的。
我观察到手动深色模式会创建一个dark的属性。
var myChart = echarts.init(chartDom, 'dark');但是手动深色模式的背景颜色不符合我的博客，所以我直接把饼图的背景改成了透明，只需要在option内设置背景透明即可。这样深色模式的背景只会显示我博客的背景。
option = {
backgroundColor: 'transparent'
};由于在Markdown中不能通过script标签直接运行JS，所以需要单独挂载一个JS。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
<style>
body {
background: #fff;
}
@media(prefers-color-scheme: dark) {
body {
background: #000;
}
}
</style>
</head>
<body>
<div id="main" style="width: 600px;height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/gh/jcjyxjs/cdn@master/43.js"></script>
</body>
</html>JS部分：
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;
option = {
backgroundColor: 'transparent',
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
option && myChart.setOption(option);
此时切换深色模式和浅色模式可以直接看到效果。