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
    评论
要创建echarts的3D环形,你需要先安装echartsecharts-gl库。在你的Vue项目中,你可以通过以下方式引入echartsecharts-gl: ```javascript import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 引入echarts-gl库 Vue.prototype.$echarts = echarts ``` 接下来,你可以使用echarts的API来创建3D环形。具体的代码可以参考echarts的官方文档和示例。在创建环形时,你可以使用tooltip配置来实现鼠标经过弹框滚动效果。例如,你可以设置tooltip的enterable为true,以便在点击tips时滚动里面的内容,并通过extraCssText设置弹框的样式,如设置高度为20%: ```javascript tooltip: { enterable: true, extraCssText: "overflow:scroll;height:20%;", } ``` 这样就可以创建一个具有鼠标经过弹框滚动效果的echarts 3D环形了。希望对你有帮助! #### 引用[.reference_title] - *1* [echarts3d饼环形(包含透明效果)](https://blog.csdn.net/weixin_41326021/article/details/120195920)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [3D圆环Echarts + 例滚动显示 + tooltip鼠标经过的弹框滚动显示](https://blog.csdn.net/weixin_45096939/article/details/128771023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值