【Axure教程】动态立体饼图（经济增长分析大屏可视化案例）

饼图常用于构成分析，能直观展示整体中各组成部分的比例分配关系，是可视化分析中最基础的组成分析工具之一。

今天就教大家怎么制作动态立体饼图的原型模板，以经济增长分析大屏可视化案例，制作的效果包括：

【效果展示】

鼠标移入饼图对应区域，该区域会高亮变色，并且显示对应的数据

【原型预览含下载地址】

https://axhub.im/ax9/2706bd78f450eaed/#g=1&p=3d经济增长分析大屏可视化案例

【制作教程】

1、材料准备

1.1立体饼图

案例中使用到的主要素材是立体饼图，获取的方式有多种，例如：

用工具生成：最常见的是在EXCEL里生成饼图的图片，然后复制到axure里，这种方法需要制作多张饼图，一张基础的饼图，然后是有几个分类就要有对应的区域变色的饼图。

如果使用生成的工具可以导入svg格式的话，就只需要制作一张基础的饼图，在axure里可以将svg变成形状，再通过设置高亮的颜色。

Axure中生成：我们也可以在Axure中，通过矩形变换形状、布尔运算、拖拉拽等方法结合，画出每个区域的立体饼图。主要有上半部分扇形，和下半部分弧形组合而成，再选择合适的颜色即可，如下图所示：

形状饼图的话，饼图的每块区域我们要设置一个对应的选中样式，就是鼠标移入对应区域后，高亮变色后的样式，案例中上半部用的是绿色，下半部用的是深绿色。

上半部分各个扇形，我们需要在命名区域填上该区域的数据。（如果是工具生成的图片，就在对应区域高亮变色的图片名上填写对应数据）

1.2区域热区

因为形状和他他实际在Axure元件的范围不一样，所以透明区域也会会出现重叠遮挡的情况，所以我们需要用多个热区（透明矩形也可以），放在对应饼图上各个分类上方，从而实现对应区域的热区控制对应区域的形状。

1.3标签

用矩形和文本标签制作即可

1.4数据弹窗

用矩形和文本标签制作即可，需要注意的是，前面那个小方块，有几个分类就要有几个颜色，将他们放在同一个动态面板的不同状态里。

2、交互制作

鼠标移入热区时，我们用设置选中的交互，让对应区域的形状选中，就可以让对应的区域变色；鼠标移入饼图后，用设置选中的交互，取消对应区域形状的选中，就可以恢复原状。

扇形区域选中时，限时数据弹窗组合，然后用设置文本的交互，将对应分类的文本和数据设置到弹窗里，并且用设置动态面板的交互，将有色矩形的动态面板设置到对应的状态页里。

扇形区域取消选中时，我们用隐藏的交互，将数据弹窗组合隐藏即可。

鼠标经过（在热区里移动时），我们用移动的交互，将数据弹出组合移动到鼠标右下方的位置，这里需要结合cursor函数获取鼠标的坐标。

每个热区和扇形的交互都是这样，根据对应区域选中和取消选中对应的扇形部分，然后再回显对应数据即可。

那上面的是针对形状饼图的方法，如果是用工具生成的图片，在鼠标移入对应扇形区域的热区，只需要显示对应高亮变色的图片，隐藏其他图片，图片显示时显示数据弹窗，并设置对应的数据即可，方法思路都是一样的。

这样我们就完成了动态立体饼图（经济增长分析大屏可视化案例）的原型模板，以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文内容及模版由公众号：Axure高保真原型 原创发布，未经许可，禁止转载和商用