如何用ECharts实现嵌套数据的饼图和折柱图的上下展示

echarts相信大家都用的很多了，它功能强大，可定制化程度高，文档也是非常的详细（多到看不完- 。-）。最近在用echarts做后台项目的时候，遇到两个问题，这里简单记录一下。

场景一：如何实现嵌套数据的饼图

在本次的需求中，产品希望用嵌套的饼图来展示嵌套的双层数据，例如产品的销售渠道，分为线上线下，线上线下又细分为多个渠道来源。按照原型图上画出来的效果，我们理所当然就会选择饼图来实现啦。

用普通饼图是否可以实现？

没错，饼图可以通过设置series，通过改变两个series的圆的半径值来实现，同时通过设置两个圆半径的差值，来实现内外圈间距。

options={
    ...
    series:[
        {
            ...
            radius: [0, '30%'],
        },
        {
            ...
            radius: ['45%', '60%'],
        }
    ]
}

但是，这样做有一个问题，就是嵌套数据的内层和外层没有办法完全对齐（产品死活要处理这个问题=。=）。就像下面的饼图这样：

使用旭日图实现

为了解决这个问题，我们可以改用旭日图来展示嵌套数据。旭日图是一种特殊的饼图，它可以将嵌套数据按照层级关系展示在同心圆上，每个圆环代表一个层级，每个扇形代表一个数据项。旭日图的优点是可以让嵌套数据的内层和外层完全对齐，并且可以通过点击扇形来下钻或上升到不同的层级。

要使用旭日图，我们需要先拿到嵌套数据，并且格式化成符合旭日图要求的结构。一般来说，嵌套数据是一个树形结构，每个节点有一个name属性和一个value属性，如果节点有子节点，则还有一个children属性。

有了格式化好的嵌套数据后，我们就可以用旭日图来展示了。在echarts中，使用旭日图非常简单，只需要设置series.type为'sunburst'，并且把嵌套数据赋值给series.data即可。最后就完美实现产品需要的效果啦~

旭日图的小小bug

旭日图的一个很方便的功能是点击下钻，也就是说，当我们点击某个扇形时，旭日图会将该扇形对应的子节点展示在最外层，同时在中间显示一个圆形的返回按钮，让我们可以回到上一层。这样，我们可以很灵活地查看不同层级的数据。

在官网给出的示例中，确实也可以完美的点击展开和返回。但是！由于设计稿是要求内外圈有边距的，在这种情况下，返回按钮就会出现小小的bug，返回按钮被内圈覆盖住，无法点击。目前尝试了一番，没有找到合适的解决方案，干脆直接设置nodeClick: false，阻止点击下钻事件，既然解决不了问题，那就从源头切断！嘻嘻我可真是个大聪明~

场景二：如何实现折线图和柱状图的上下展示

折线图和柱状图处于同一个坐标轴下，数据相近

有时候，我们需要在同一个坐标轴下展示两种不同类型的数据，比如折线图和柱状图。如果这两种数据的数值相差很大，那么我们可以直接使用双y轴来分别展示它们。但是，如果这两种数据的数值相近，那么我们就会遇到一个问题，就是折线图和柱状图会重叠在一起，导致视觉上不够清晰和区分。例如，下图中的折线图和柱状图就有这个问题：

折线图和柱状图重叠

使用`boundaryGap`来实现折线图和柱状图的上下展示

为了解决这个问题，我们可以使用一个很有用的设置，就是boundaryGap。boundaryGap是指坐标轴两端留出来的空白区域，在echarts中，默认情况下，类目轴（categoryAxis）会设置为true，也就是留出空白区域；而数值轴（valueAxis）会设置为false，也就是不留出空白区域。通过设置boundaryGap为一个数组，我们可以分别指定坐标轴两端留出来的空白区域的大小。

它可以设置坐标轴两边留白策略。默认情况下，boundaryGap为true，表示坐标轴两边留白一定比例（例如5%），这样可以保证柱状图不会超出坐标轴范围。但是如果我们将boundaryGap设置为一个数组（例如['20%', '20%']），表示坐标轴两边留白20%，那么就可以实现折线图和柱状图的上下展示啦。

现在我们的需求是折线图在上，柱状图在下，那么只需要将折线图的Y轴最小值的间距拉大，把柱状图的Y轴最大值的间距拉大，就可以实现上下展示啦~

需要注意的是设置boundaryGap之后不能再使用alignTicks，否则会不生效。这时候两根Y轴的分隔线会交叠，可以选择隐藏掉其中一条的刻度线。

options={
    ...
    yAxis:[
        {
            ...
            name: "line",
            boundaryGap: ['50%', '10%'],
        },
        {
            name: "bar",
            radius: ['5%', '60%'],
            splitLine:{
                show: false
            }
        }
    ]
}

自从有了chatgpt 妈妈再也不担心我熬夜查文档啦

在不熟悉文档的情况下，要怎么准确找到你想要的属性呢？答案自然是chatgpt啦~
温馨提示：对于chatgpt喜欢胡说八道这点还需要自行甄别，如下图中给出的答案，axis的max min值和boundaryGap其实是互斥的，当设置了max min的值，boundaryGap不会生效。