? ? ? ? ?前言：公司项目的大屏需要展示3D饼图，之前有用过echarts-gl写过，它需要的代码太多，而且label的实现是label是属于2D饼图的，2D饼图设置透明，用3D饼图覆盖在上面。因为label不是3D饼图的，有时候会出现label指向不准确。公司有的项目的实现用的是vue-echarts，之前看过该官方文档，写的不详细，就不想用。
????????看了highcharts的示例，满足需要，代码简单，就用highcharts实现了3D饼图。
????????后面提要求说光是3D的饼图太单调了，希望鼠标移动到某个区域，该区域突出，像这样：
????????之前有看到写怎么用highcharts写不同高度的环图，感觉可以参照这个实现。
????????设想是给每项数据都添加事件mouseOver和mouseOut，在mouseOver事件里调高当前部分的高度，在mouseOut事件里还原之前的高度：
????????看别人通过设置shapeArgs调整每个模块的高度，尝试如下：
????????发现高度不会变化，尝试修改point.shapeArgs.z也没有用。
????????查找highcharts官网，发现point里有个方法update，改用update，发现也不行：
????????将别人实现不同高度环图的代码，复制下来，一点点删减代码，发现可以精简到只用point.shapeArgs.depth去调整模块的高度：
? ? ? ? 但整个环图是向下的：
????????参照对方的调整方式：
????????发现底部没有对齐：
????????感觉是因为环图沿y轴倾斜，调整的高度不能直接等于模块的高度，将模块的高度乘以Math.sin(angle)对应的值， 修改后发现底部对齐了：
????????回到之前的需求，感觉鼠标移入修改模块高度应该是要使用point.graphic.attr去修改，调整代码：
????????调试发现随着鼠标的移入移出，模块的高度会调整，没有进行位置调整，高度是往下延伸的，而且移出后，模块比其他部分变高了：
????????打印point的信息，发现虽然我饼图的depth设置为20，实际绘制后打印的depth是15。鼠标移出后将模块的depth设置为20，赋值后在打印信息模块depth的值还是20，就比其他没有鼠标移入移出过的模块高了。多次尝试发现实际绘制的depth都是设置的depth的0.75倍，参考文档里也有乘以0.75的操作，感觉是官方的设定。将设置depth除以0.75后，鼠标移出模块后该模块和其它部分的高度一致了。
????????用前面调整位置的方式，发现移动模块的底部总是在其它部分的顶部：
? ??????感觉将位置的值减去最小高度就可以了，代码调整如下：
????????因为鼠标移入某个模块后，再做操作，而”each(points,...)”里的points对应所有模块的point的值，每次鼠标移入移出都要遍历所有模块的point，有点浪费，而且我还需要在load后将points保存下来，应该可以用当前的模块对应的point去替换points，代码调整如下：
????????测试后跟之前表现一样。