? ? 在我們公司全鏈路產(chǎn)品設(shè)計中，UI設(shè)計師以2.5D的形式設(shè)計了金字塔形狀的分布圖。如下圖：
????我們目前可視化圖表有使用Echarts、antv\G2容达，之相近的是漏斗圖古涧，3D效果也未支持金字塔。在搜索后發(fā)現(xiàn)highChart的金字塔符合度達(dá)90%花盐，奈何需要授權(quán)羡滑。
????只能自己折騰了，實現(xiàn)的具體要求有：
1算芯、保持角度不變(30deg/150deg);
2柒昏、支持顏色設(shè)置；
3熙揍、圖例支持交互职祷；
4、支持最小顯示届囚；
5有梆、支持tooltips。
有了解Echarts都知道Echarts支持自定義圖形意系，我決定采用這中方式實現(xiàn)設(shè)計效果泥耀。根據(jù)上面的要求，決定分幾個步驟實現(xiàn)：
1蛔添、定義顏色：支持3D效果分別需要配置兩面漸變顏色痰催，圖例顏色使用每個數(shù)組的第一個顏色;
2、預(yù)設(shè)數(shù)據(jù)：為了控制大小的同時避免數(shù)量級相差太大迎瞧，需要把數(shù)值轉(zhuǎn)換成百分比（最大100夸溶，最小5）用以坐標(biāo)計算，同時保留原數(shù)值用于tooltips展示凶硅；ps:處理后包括（原數(shù)值：num蜘醋、原始百分比：percent，支持最小值用于坐標(biāo)計算的百分比：value）咏尝，pyramid3dData為實際數(shù)據(jù)[{name,value}]压语；
3、計算坐標(biāo)：
a编检、從金字塔頂點的圖形是個三角形胎食，其余都是等邊梯形，考慮到3D效果頂部三角形的底邊中間點必然向下延伸一段距離允懂？厕怜，具體距離應(yīng)為（頂部y-底右y+(底右x-居中x)*tan(60度)），當(dāng)梯形時保持平行頂部也需要向下凹陷同樣一段距離；
b粥航、從三角形的頂點開始計算琅捏，坐標(biāo)點的順序從頂點開始計算，順時針開始递雀，梯形的起點(left-top)是上一個圖形的終點(bottom-left)柄延；
c、計算出轉(zhuǎn)換后坐標(biāo)點的位置：
4缀程、定義渲染金字塔各層的函數(shù)
5搜吧、設(shè)置并執(zhí)行
大功告成！
效果基本已經(jīng)實現(xiàn)杨凑，后續(xù)有時間再做優(yōu)化封裝滤奈。發(fā)現(xiàn)有什么需要改進(jìn)的歡迎斧正。
