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的三个部分，第一个代表的是当前用量(下图橘黄色部分)，第二个即是下图天蓝色的部分，代表总量减去当前用量，第三部分的值等于总量，颜色透明，其实显示出来就是圆环图的下半部分。这样的话，上半部分的值其实是等于下半部分的值的，整个圆环的总值是两倍的总量。（说白了还是障眼法...）

效果图

写在后面

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

设计图

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

20220225更新

圆环图最后用于填充下半部分的数据项最好这样写,可以使legend和tooltip不显示出来

{
  name: '',
  value: '....',
  itemStyle: '...',
  tooltip: {
    show: false
  }
}

再及：echarts5.0已经支持饼图圆角了