前言

玩轉ECharts系列，主要為大家講解我們基于ECharts如何實現企業級大屏項目中較為常用的各種奇奇怪怪的圖表，接下來我們將通過幾篇文章從基礎圖表開始為大家詳細講解實現這些圖表樣式的一些“小心機”。

導讀

閱讀完此文，你會了解基于ECharts：

1、如何實現非全圓的餅圖

2、如何實現非全圓的玫瑰圖

3、如何實現扇區間有空隙的餅圖

背景

在繪制餅圖或玫瑰圖時，你也許會遇到以下問題：

1.容器為窄長矩形，使得繪制的扇區半徑過小，剩余的空白面積過大卻無法很好地利用。

2.label的文字較長，想要完整顯示只能對文字進行換行處理、盡量縮減label的長度且壓縮扇區的半徑。

3.數據量較小(3-5個)或圖表貼近視窗邊緣，想要來點更有趣好看的顯示效果。

那么不妨試試使用1/2圓甚至1/4圓來代替全圓的餅圖或玫瑰圖進行數據的展示。

但是，查閱文檔可知，當前ECharts的series.pie并不支持endAngle這類屬性。這意味著，沒有較為直接的方法來指定實際的顯示角度。

那么，要如何實現上圖所示的效果呢？本文選擇采用“使用透明扇形來填充非顯示部分”的方式來進行非全圓餅圖、玫瑰圖的繪制。其核心在于使用相應比例的數據對series.data進行填充。

1/2圓的餅圖

觀察可得，上圖的背景部分可以拆解為2個疊加在一起的1/2圓環形圖。我們就由此開始，先討論如何實現1/2圓的餅圖。由于餅圖扇區的角度直接表示其在整個圓中的比，因此，占比1/2圓的透明扇形的值大小應當等于實際需要顯示的所有值的和。參考示例：https://gallery.echartsjs.com/editor.html?c=xFcvAMHjr1&v=1核心代碼const sum = data.reduce((prev, curr) => prev + curr.value, 0);// 這里給數據加了一行，顏色置為透明，數值為之前行的總和，以使之前的數據項布局為半圓。data.push({ name: null, value: sum, itemStyle: { color: 'rgba(0,0,0,0)' }, tooltip: { show: false }});

1/2圓的玫瑰圖

玫瑰圖的每一個扇區的角度相等，因此，1/2圓玫瑰圖的計算重點在于填充數據的數量與需要顯示數據的數量相等，且填充值不應大于顯示值的最大值(否則實際顯示數據的半徑會相應縮短)。參考示例：https://gallery.echartsjs.com/editor.html?c=xD5N0ncncr&v=4核心代碼const originDataLen = data.length;const spanAngle = 180; // 需要顯示的角度const repeatedMultiple = 360 / spanAngle;// 這里根據要顯示的角度 計算了需要插入的數據量const addDataLen = parseInt((repeatedMultiple - 1) * originDataLen);for (let index = 0; index < addDataLen; index++) { data.push({ name: null, // 這里給數據置零，即在視覺上不顯示 value: 0, // 這里保證了異常情況下(數據都為0時)作為占位的數據在視覺上仍為不可見狀態。 itemStyle:{ color: 'rgba(0,0,0,0)' }, tooltip: { show: false, formatter: null } });}

只需修改上例中spanAngle的角度，我們還可以繪制1/4圓、3/4圓……的玫瑰圖。但需要注意的是，由于計算方法的限制，設定的顯示角度spanAngle最好為360的約數(即360/spanAngle為整數)。否則，隨著數據長度的變化，實際顯示角度與期望的顯示角度可能并不相同。?

擴展實現

基于以上修改data的思路，我們還能通過在數據間插值的方式，繪制扇區之間有空隙的餅圖。參考示例：https://gallery.echartsjs.com/editor.html?c=xRdGZ8PVwA&v=1

實例展示

這里有一些我們在實際應用中使用的的效果，拋磚引玉，為大家設計時提供一個思路。

往期回顧

1.?玩轉ECharts之實現“頂端裝飾”

2.?玩轉ECharts之實現“動態顏色的Label”

3.?玩轉ECharts之實現“自定義圖標”

4.?玩轉ECharts之實現“環形漸變”

總結

以上是生活随笔為你收集整理的echart 圆饼图 显示单位_玩转ECharts之实现“1/2圆的玫瑰图”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。