在我们公司全链路产品设计中，UI设计师以2.5D的形式设计了金字塔形状的分布图。如下图：

    我们目前可视化图表有使用Echarts、antv\G2，之相近的是漏斗图，3D效果也未支持金字塔。在搜索后发现highChart的金字塔符合度达90%，奈何需要授权。
    只能自己折腾了，实现的具体要求有：

1、保持角度不变(30deg/150deg);
2、支持颜色设置；
3、图例支持交互；
4、支持最小显示；
5、支持tooltips。

有了解Echarts都知道Echarts支持自定义图形，我决定采用这中方式实现设计效果。根据上面的要求，决定分几个步骤实现：

1、定义颜色：支持3D效果分别需要配置两面渐变颜色，图例颜色使用每个数组的第一个颜色;

2、预设数据：为了控制大小的同时避免数量级相差太大，需要把数值转换成百分比（最大100，最小5）用以坐标计算，同时保留原数值用于tooltips展示；ps:处理后包括（原数值：num、原始百分比：percent，支持最小值用于坐标计算的百分比：value），pyramid3dData为实际数据[{name,value}]；

3、计算坐标：
a、从金字塔顶点的图形是个三角形，其余都是等边梯形，考虑到3D效果顶部三角形的底边中间点必然向下延伸一段距离？，具体距离应为（顶部y-底右y+(底右x-居中x)*tan(60度)），当梯形时保持平行顶部也需要向下凹陷同样一段距离；

b、从三角形的顶点开始计算，坐标点的顺序从顶点开始计算，顺时针开始，梯形的起点(left-top)是上一个图形的终点(bottom-left)；

c、计算出转换后坐标点的位置：

4、定义渲染金字塔各层的函数

5、设置并执行

大功告成！

效果基本已经实现，后续有时间再做优化封装。发现有什么需要改进的欢迎斧正。