UI设计的金字塔图形这样：
要实现这个效果，感觉用两个金字塔按不同角度旋转，拼接到一起就可以了。
在highcharts的load函数返回的this中含有seriesGroup属性，其包含绘制出来金字塔图形信息，sesiesGroup.element即其元素，通过getBoundingClientRect()可以获取金字塔的宽高，用Math..atan(width / 2 / height)可以得到需要选择的弧度radian，将弧度转成角度angle。
this中含有series属性，series含有每个图表的信息，设置图表的transform去旋转金字塔：
根据浏览器上展示的效果，两个金字塔的旋转没有问题，还需要将它们聚拢在一起。一开始，以为金字塔是按其中心旋转的，通过观察上图，发现两个金字塔的中心点没有重叠，排除。上图，明显一个往上偏，一个往下偏，猜测以金字塔的左顶点进行偏移。
计算金字塔顶点旋转后偏移量再矫正：
进行位置调整的金字塔的每个模块的中心点与指引线并没有对齐，这个的逻辑处理应该是错误的。
写了个关于transform的demo，发现自己对transform的理解有出入，以为transform的值“transform: rotate(angle) translateX(moveX) translateY(moveY)”应该是先偏移，根据偏移的位置再往x移动moveX，往y移动moveY。
实际要实现旋转angle后，旋转后的位置沿x方向移动distance举例应该这样写：
实际要实现旋转angle后，旋转后的位置沿y方向移动distance举例应该这样写：
按照上面方式调整需要移动的距离：
在浏览器上渲染的效果还是不行。感觉不是按金字塔的左顶点旋转。后面发现可以通过transformOrigin以某一点来旋转，将这个属性设置为金字塔中顶点，也就不同调整位置了：
浏览器渲染更新后，发现还是不行。猜测即使设置了金字塔的transformOrigin，实际旋转是容器中对应该点的位置来旋转的，所以金字塔的transformOrigin的值应该是中顶点对应容器的位置。
根据load函数this的信息，发现其含有属性contanier。这是属性的内容就是金字塔对应的容器，计算出金字塔中心顶点映射到容器的职位赋值给transformOrigin：
看浏览器上的效果，比之前好了很多，根据指引线的为遏制感觉金字塔都往右偏，看控制台：
highcharts的金字塔本身有translate偏移，初步判定设置的transform的内容将highcharts的设置覆盖掉了，补上：
浏览器渲染更新后，效果可以了。
设计图的label一部分在左，一部分在右。设想确定每个数据的方向，不同金字塔显示和隐藏不同的项：
所有的label还是显示在一起，感觉单独设置每一项数据对应的dataLabels的position是没有用，将position的设置放到金字塔上：
可以看到牵引线一边有间隔，一边没有，我在自定义的dataLabels上一开始就有一些设置：
感觉左边的加上对应的配置就可以了：
图表重新渲染后，确实可以了。
接下来调整一下牵引线样式：
牵引线是根据svg绘制的，pathArray存放其绘制信息，数组有三个值。数据的第一个位置点startPoint是最靠近label内容，数据的最后一个值endPoint最靠近金字塔的中轴，绘制半圆后的位置应该为endPoint的x加减圆的直径。需要圆的绘制承接之间的倾斜，调整位置点的计算：
看设计稿，金字塔每层之间有间隔，想着修改边框的大小和颜色就可以了。修改后，效果如下：
金字塔的斜边是不需要展示边框的，而且感觉边框是覆盖在金字塔上绘制，每个层都没有之前高了，设置一个较大的边框值，发现确实是这样的：
看过一个实现3D金字塔间隔的文章，实现方式是通过每一层添加数据，并设置其背景色为透明。根据对方的代码做如下调整：
鼠标移入金字塔的某一项，只有一边是亮的：
本来想设置移入一边，两边一起亮的，设置selected无效，翻了半天文档，没觉得哪个属性适合，直接禁用掉鼠标移入高亮:：
在缩放浏览器的时候，highcharts会重新绘制图形，样式变成了这样：
在页面大小发生改变的时候，highcharts是调用redraw而不是load，需要在redraw执行与load一样的操作，经打印发现redraw的this与load的this一致，redraw可直接复用load里的代码：
发现分的更开的，感觉我需要先把角度转回来：
发现角度可以转回来，在后面加上之前的逻辑处理，调整页面大小后，金字塔绘制正常了。
参考：
Highcharts实现3d有间隔的金字塔（https://blog.csdn.net/weixin_53641728/article/details/130605509）
