Echarts3实例环形图

小编 2026-06-19 阅读:1245 评论:0

前言环形图本质上就是饼图，我们把饼图的半径设置成阶段范围内的值域，饼图就变成了环形图。实现效果实现代码 <!DOCTYPE htm...

前言

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

实现效果

$\"在这里插入图片描述\"$

实现代码

<!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>