Echarts3实例 环形图

本文介绍如何使用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>
### ECharts 环形 示例代码 为了创建一个基本的环形,在 `series` 配置项中指定 `type` 为 `&#39;pie&#39;` 并设置 `radius` 参数来调整内外半径的比例,从而形成环状效果[^1]。 ```javascript option = { title: { text: &#39;访问来源&#39;, subtext: &#39;纯属虚构&#39;, left: &#39;center&#39; }, tooltip: { trigger: &#39;item&#39; }, legend: { orient: &#39;vertical&#39;, left: &#39;left&#39; }, series: [ { name: &#39;访问来源&#39;, type: &#39;pie&#39;, radius: [&#39;40%&#39;, &#39;70%&#39;], // 设置内圈和外圈大小比例 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: &#39;#fff&#39;, borderWidth: 2 }, label: { show: false, position: &#39;center&#39; }, emphasis: { label: { show: true, fontSize: &#39;40&#39;, fontWeight: &#39;bold&#39; } }, data: [ {value: 335, name: &#39;直接访问&#39;}, {value: 310, name: &#39;邮件营销&#39;}, {value: 234, name: &#39;联盟广告&#39;}, {value: 135, name: &#39;视频广告&#39;}, {value: 1548, name: &#39;搜索引擎&#39;} ] } ] }; ``` 对于更复杂的场景,如在环形中央显示文字,则可以利用 `graphic` 属性来进行自定义绘制: ```javascript graphic: [{ type: &#39;text&#39;, left: &#39;center&#39;, top: &#39;middle&#39;, style: { text: &#39;总金额\n¥9999.99&#39;, // 支持换行符 \n 来分行显示多行文本 fill: &#39;#aaa&#39;, font: &#39;bolder 20px Microsoft YaHei&#39; } }] ``` 如果希望实现带有渐变色的效果,可以通过修改 `axisLine.lineStyle.color` 的方式引入线性渐变对象[^2]。需要注意的是,上述例子中的 gauge 类型主要用于仪表盘样式而非传统意义上的/环形,因此实际应用时应根据具体需求选择合适的表类型并相应调整属性配置。 最后,关于如何让例支持滚动以及定时切换高亮状态等功能,可通过编写 JavaScript 函数配合 `dispatchAction()` 方法达成目标[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值