前言

大名鼎鼎的echarts中有一些有趣的圖表，其中餅圖(pie)可以衍生出南丁格爾圖(玫瑰圖),而改變餅圖的內(nèi)外半徑又可以使餅圖變成一個(gè)圓環(huán)圖，于是問(wèn)題來(lái)了，怎么生成一個(gè)半圓形的圓環(huán)圖呢？首先我們要了解一下半圓圖的特點(diǎn)，一個(gè)完整的餅圖/環(huán)形圖展示的是各個(gè)部分的占比，而半圓環(huán)形圖則可以直觀的展示出某一項(xiàng)占總量的占比，比如說(shuō)月度用電量占年度用電量的比例。（其實(shí)還是項(xiàng)目需求啦）然后，我們要思考如何去實(shí)現(xiàn)它，簡(jiǎn)單的想法，將環(huán)形圖的下半部分隱藏起來(lái)，還是以用電量舉例：如果月度用電達(dá)到了年度用電的80%，看上去半圓圖就滿了，顯然是不合理的，那么應(yīng)該如何實(shí)現(xiàn)呢，直接上代碼，原理還是挺簡(jiǎn)單的。

實(shí)現(xiàn)過(guò)程

    let chart1 = echarts.init(document.getElementById('chart'));
    let current = 25;// 當(dāng)前用量
    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',// 實(shí)際顯示部分是總量-用量
                        value: all - current,
                        itemStyle: {
                            color: 'skyblue'
                        }
                    },
                    {
                        name: 'bottom',
                        value: all,
                        itemStyle: {
                            color: 'transparent'
                        }
                    },
                ]
            }
        ]
    };
    chart1.setOption(option);

關(guān)鍵之處也就是data的三個(gè)部分，第一個(gè)代表的是當(dāng)前用量(下圖橘黃色部分)，第二個(gè)即是下圖天藍(lán)色的部分，代表總量減去當(dāng)前用量，第三部分的值等于總量，顏色透明，其實(shí)顯示出來(lái)就是圓環(huán)圖的下半部分。這樣的話，上半部分的值其實(shí)是等于下半部分的值的，整個(gè)圓環(huán)的總值是兩倍的總量。（說(shuō)白了還是障眼法...）

效果圖

寫在后面

使用echarts也有差不多一年半的時(shí)間了，echarts中其實(shí)有好多有趣的東西，只要你善于思考聯(lián)想，很多設(shè)計(jì)稿上的效果都可以通過(guò)圖形組合，或者稍稍變通一下來(lái)實(shí)現(xiàn)。不過(guò)echarts本身有些細(xì)節(jié)還需要完善，就拿這個(gè)環(huán)形圖來(lái)說(shuō)吧，ui稿其實(shí)是這樣的：

設(shè)計(jì)圖

目前就我所知，echarts還不能實(shí)現(xiàn)這種圓角的效果。。。有些美中不足吧（不過(guò)使用highcharts可以繪出圓角環(huán)形圖）

20220225更新

圓環(huán)圖最后用于填充下半部分的數(shù)據(jù)項(xiàng)最好這樣寫,可以使legend和tooltip不顯示出來(lái)

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

再及：echarts5.0已經(jīng)支持餅圖圓角了