Echarts3实例环形图

最新推荐文章于 2025-07-23 19:20:00 发布

原创最新推荐文章于 2025-07-23 19:20:00 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #环形图 #饼图 #pie

Echarts 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用ECharts将饼图转换为环形图，通过调整半径参数实现美观的数据展示，包括代码示例和样式设置。

前言

环形图本质上就是饼图，我们把饼图的半径设置成阶段范围内的值域，饼图就变成了环形图。

实现效果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            height: 100%;
        }
        *{
            margin: 0px;
            height: 0px;
        }
        #chartDiv{
            width: 650px;
            height: 370px;
            border: 1px solid red;
        }
    </style>
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <div id="chartDiv"></div>
    <script>
        var chartDiv = echarts.init(document.getElementById('chartDiv'));
        var option = {
            title: {
                text: '各阶段工程数量及占比',
                left: 'center',
                textStyle:{
                    fontSize:14
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                extraCssText:"height:43px;"//设置tooltip的高度
            },

            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    center: ['50%', '60%'],//控制位置
                    radius: ['40%', '60%'],//控制圆环的宽度
                    avoidLabelOverlap: true,//防止重叠
                    label: {
                        normal: {
                            formatter: '{a|{b}}{abg|}\n{hr|}\n  {b|数量：}{c}  {per|{d}%}  ',//空格也起作用
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 2,
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 20,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 12,
                                    lineHeight: 20
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                        }
                    },
                    data:[
                        {value:335, name:'直达'},
                        {value:679, name:'营销广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };
        chartDiv.setOption(option);
    </script>
</body>
</html>