echarts 如何实现如下图的效果

img


echarts 如何实现如下图的效果？求解答，这个圆环图有demo吗

你可以参考一下这个网站里面的例子

demo你可以看下


<!DOCTYPE html>
<html>
<head>
    <title>Echarts Circle Donut Chart</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 用于渲染 Echarts 图表的 div 容器 -->
    <div id="chart" style="width: 400px; height: 400px;"></div>

    <script>
        // 初始化 Echarts 实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 数据
        var data = [
            { name: 'Category 1', value: 40 },
            { name: 'Category 2', value: 60 }
        ];

        // 内圆半径和外圆半径
        var innerRadius = '50%';
        var outerRadius = '70%';

        // 配置项
        var option = {
            series: [
                // 内圆
                {
                    type: 'pie',
                    radius: [0, innerRadius],
                    data: data,
                    label: {
                        show: false
                    }
                },
                // 外圆
                {
                    type: 'pie',
                    radius: [outerRadius, '100%'],
                    data: data,
                    label: {
                        show: false
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

两个结合一下就是你想要的

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^