我首先找了一个官方示例做例子。

圆角环形饼图: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);
Title

此时切换深色模式和浅色模式可以直接看到效果。

最后修改:2022 年 02 月 20 日 04 : 16 PM
如果觉得我的文章对你有用,请随意赞赏