【React Native】做了一个简约的雷达图组件

本文目录

【React Native】做了一个简约的雷达图组件
- 获取组件
- 实现思路
- 用法示例
- - 简易用法
  - 自定义美化
- 结语

【React Native】做了一个简约的雷达图组件

最近在使用 react-native 中需要绘制雷达图，没有找到合适的小组件（大的图表库未直接提供，需要自行绘制；小的封装好的雷达图组件外观一般或者有无法更改的瑕疵）。最后我选择了自造了一个适用于 react-native 的雷达图组件。

获取组件

已发布的 npm 包¹（@evanpatchouli/react-native-radar）
- npm i -S @evanpatchouli/react-native-radar
Github仓库项目源码²

实现思路

利用 react-native-svg，计算好组成雷达图的每个图像元素的尺寸和坐标，依次绘制背景、边框、轴线、刻度、有效面积、值线和标签，并将他们按顺序层层叠加。

用法示例

简易用法

import EvpRadar from "@evanpatchouli/react-native-radar";const MyRadar = () => (<EvpRadardata={[100, 20, 30, 10, 40]}labels={["Aaa", "Bbb", "Ccc", "Ddd", "Eee"]}labelSpace={30}border={{type: "circle", // polygon, circle, none}}strokeColor="none"Axis={{type: "dashed", // solid, dashed, none}}/>
);export default function App() {return (<MyRadar />);
}

效果图：
最简易demo

自定义美化

多传入和覆盖一些参数，进行更细节的样式设置。详细的参数说明已写在代码注释中，文中不再花篇幅做介绍。

const MyRadar = (<EvpRadar// containerViewProps={{ // 设置容器属性//   style: {//     borderColor: "rgba(0, 0, 200, 0.5)",//     borderWidth: 1,//     borderRadius: 10,//     overflow: "hidden",//     margin: 10,//     padding: 10,//   },// }}data={[100, 20, 30, 10, 40]}labels={["Aaa", "Bbb", "Ccc", "Ddd", "Eee"]} // 文本标签// labels={[ //使用自定义的标签元素//   <Text key="Aaa">Aaa</Text>,//   <Text key="Bbb">Bbb</Text>,//   <Text key="Ccc">Ccc</Text>,//   <Text key="Ddd">Ddd</Text>,//   <Text key="Eee">Eee</Text>,// ]}radius={100} // 图片半径，默认: 100backgroundColor="rgba(0, 0, 200, 0.05)" //背景色，默认: nonestrokeColor="rgba(0, 0, 200, 0.5)" // 值线的颜色，默认: blackstrokeWidth={1.5} // 值线的宽度，默认: 1strokeType="solid" // 值线的类型：dashed 或 solid，默认: solid// strokeOpacity={1} // 值线的不透明度，默认: 1dashArray={[5, 3]} // 虚线形值线的形式，画多长留多少空白，默认: [10, 5]fillColor="rgba(0, 255, 255, 0.4)" // 值线围起来的区域的填充颜色，默认: nonelabelProps={{ fill: "rgba(0, 0, 200, 0.3)" }} // 文本标签属性coefficient={1} // 系数，值线的长度 = 系数 * 值，默认: 1labelSpace={40} // 文本标签与雷达边界的间距，默认: 0border={{ // 雷达边界配置项type: "polygon", // 边界形状，circle 或 polygon（多边形）或 none, 默认: nonecolor: "rgba(0, 0, 200, 0.5)", // 边界颜色，默认: blackwidth: 10, // 边界宽度，默认: 1}}Axis={{// 雷达轴线配置项type: "dashed", // 轴线线条类型，solid 或 dashed 或 none，默认: nonewidth: 1, // 轴线宽度，默认: 1color: "rgba(0, 0, 200,  0.2)", // 轴线颜色，默认: greydashArray: [5, 4], // 虚线形轴线的形式，默认: [10, 5]}}ScaleLine={{// 刻度线配置项type: "solid", // 刻度线线条类型，solid 或 dashed 或 none，默认: noneshape: "polygon", // 刻度线形状，polygon 或 circle. 如果未指定，将跟随边框 border 的类型. 如果雷达边框形状也未指定，默认为 polygonnumber: 4, // 等分刻度线数量，默认: 0width: 1, // 刻度线宽度，默认: 1color: "rgba(0, 0, 200, 0.2)", // 刻度线颜色，默认: greydashArray: [5, 4], // 虚线形刻度线: [20, 5]// opacity: 1 // 刻度线的不透明度，默认: 1}}/>
);