Flutter雷达图package

本文主要用Flutter实现雷达统计图，支持自定义颜色、形状、背景图等效果。大家可在github查看代码：https://github.com/WxqKb/flutter_radar_map.git。

背景

8月份项目需要用到雷达图的时候，pub社区竟然没有一个雷达图的插件；没办法只能自己动手写。直到笔者发布之日，也才两三个插件，并且定制化程度低，希望此插件能对大家有所帮助！

在这之前我们需要先理解下雷达图的应用场景：在多个维度下，不同角色需要对比在每个维度中的比重，同时可以很直观看出每个角色的综合比重。

注意两个点：

①多个维度（至少三个以上）：即需要考量的角度，如：成绩方面可能有语文、数学、英语、体育等；如果只有1 、 2个维度，那没必要用雷达图，你直接用柱形图更加直观。

②不同角色：雷达图为的是展示每个角色在各个维度的比重和整体的综合比重，一个角色也不是不行，但笔者认为这就失去了灵魂。如果你把小明的5科成绩画成一个雷达图，自己对比每个维度，是没什么太大意义的，还是柱形图更直观。

因此，要用雷达图，最好维度在3-6个，角色在2个以上。

使用方法

调用方法

这里model的构造思路来源于echart官网雷达图的示例。    legend为图例，也就是背景中所说的角色，一共有多少个角色要做对比；indicator为维度列表，每个维度需要带有名称和最大值；data为每个角色对应的维度的值；其他几个参数都是显而易见，这里不做过多解释，

注意：legend和data两个列表，请务必按顺序一一对应，才可达到图例与维度值的统一。同时，MapDataModel的元素也请一一对应维度指标中的顺序。

效果

方形背景

圆形带底图

动画效果

写在最后

这个雷达图组件应用到的知识是：Flutter animation和canvas，以及一些封装的思想；是一个纯dart的package，flutter开发者可以完全复制代码进行引用。

另外，由于科学上网的问题，笔者没有办法上传到pub社区。目前是放在GitHub上，有需要的小伙伴请随意使用，随手给个star更不错。也欢迎大家与我一起交流，多多指导！

链接：https://github.com/WxqKb/flutter_radar_map.git