玩转ECharts之实现“1/2圆的玫瑰图”

前言

玩转ECharts系列，主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表，接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些“小心机”。

导读

背景

在绘制饼图或玫瑰图时，你也许会遇到以下问题：

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圆的透明扇形的值大小应当等于实际需要显示的所有值的和。

参考示例：gallery.echartsjs.com/edit or.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圆玫瑰图的计算重点在于填充数据的数量与需要显示数据的数量相等，且填充值不应大于显示值的最大值（否则实际显示数据的半径会相应缩短）。

参考示例：gallery.echartsjs.com/editor.html…

核心代码

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的思路，我们还能通过在数据间插值的方式，绘制扇区之间有空隙的饼图。

参考示例：gallery.echartsjs.com/editor.html…

实例展示

这里有一些我们在实际应用中使用的的效果，抛砖引玉，为大家设计时提供一个思路。

往届回顾

1.  如何实现顶端装饰

2.  如何实现动态的label颜色

3.  如何实现自定义的icon

4.  如何实现环形渐变