tips:使用echarts构建一个半圆环形图

前言

大名鼎鼎的echarts中有一些有趣的图表,其中饼图(pie)可以衍生出南丁格尔图(玫瑰图),而改变饼图的内外半径又可以使饼图变成一个圆环图,于是问题来了,怎么生成一个半圆形的圆环图呢?首先我们要了解一下半圆图的特点,一个完整的饼图/环形图展示的是各个部分的占比,而半圆环形图则可以直观的展示出某一项占总量的占比,比如说月度用电量占年度用电量的比例。(其实还是项目需求啦)然后,我们要思考如何去实现它,简单的想法,将环形图的下半部分隐藏起来,还是以用电量举例:如果月度用电达到了年度用电的80%,看上去半圆图就满了,显然是不合理的,那么应该如何实现呢,直接上代码,原理还是挺简单的。

实现过程

    let chart1 = echarts.init(document.getElementById('chart'));
    let current = 25;// 当前用量
    let all = 100;// 总量
    let option = {
        series: [
            {
                type: 'pie',
                label: {
                    show: false
                },
                center: ['50%', '50%'],
                radius: ['50%', '70%'],
                startAngle: 180,
                data: [
                    {
                        name: '用量',
                        value: current,
                        itemStyle: {
                            color: '#ff9900'
                        }
                    },
                    {
                        name: 'rest',// 实际显示部分是总量-用量
                        value: all - current,
                        itemStyle: {
                            color: 'skyblue'
                        }
                    },
                    {
                        name: 'bottom',
                        value: all,
                        itemStyle: {
                            color: 'transparent'
                        }
                    },
                ]
            }
        ]
    };
    chart1.setOption(option);

关键之处也就是data的三个部分,第一个代表的是当前用量(下图橘黄色部分),第二个即是下图天蓝色的部分,代表总量减去当前用量,第三部分的值等于总量,颜色透明,其实显示出来就是圆环图的下半部分。这样的话,上半部分的值其实是等于下半部分的值的,整个圆环的总值是两倍的总量。(说白了还是障眼法...)


11709825-bf7a2d2d3e2efa3f.png
效果图

写在后面

使用echarts也有差不多一年半的时间了,echarts中其实有好多有趣的东西,只要你善于思考联想,很多设计稿上的效果都可以通过图形组合,或者稍稍变通一下来实现。不过echarts本身有些细节还需要完善,就拿这个环形图来说吧,ui稿其实是这样的:


11709825-86df2858a522763e.png
设计图

目前就我所知,echarts还不能实现这种圆角的效果。。。有些美中不足吧(不过使用highcharts可以绘出圆角环形图)

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值