自定义vue项目的雷达图组件

主要思路：

利用canvas，通过传入一组数组数据，根据数组数据的个数，自动生成一个多边形的雷达图形，并在对应的坐标点绘制。

还有一个难点，就是需要计算原点是否在有数值的几个点连成的图形中，如果在图形中，则不连接原点，如果是在图形外，则要连接原点的坐标形成新的图形。

这里判断原点是否在图形中，用的基本思想是利用射线法，以被测点Q为端点，向任意方向作射线（一般水平向右作射线），计算射线与多边形各边的交点，如果是偶数，则点在多边形外，否则在多边形内。还会考虑一些特殊情况，如点在多边形顶点上，点在多边形边上等特殊情况。

判断算法描述如下：首先，对于多边形的水平边不作考虑；其次，对于多边形的顶点和射线相交的情况，如果该顶点是其所属的边上纵坐标较大的顶点，则计数，否则忽略该点；最后，对于Q在多边形边上的情形，直接可以判断Q属于多边形

参考：http://paulbourke.net/geometry/insidepoly/

目前可传入的配置参数，后续可根据项目的需求自由添加实现新的配置参数：

areaColor:  ’rgba(140,144,220,0.55)  // 雷达数据坐标点围起来的图形的填充颜色
segmentLineColor: '#d8d8d8' // 原点到数据坐标点的连线的颜色
diagonalLineColor: 'rgba(216,216,216,0.4)' // 雷达对角线的颜色
numberLineColor: ‘rgba(140,144,220,0.3)’ // 雷达线的颜色
axisTextColor: ‘rgba(140,144,220,0.8)’ // 数值文字的颜色
edgeNumber: 4 // 分割线的数量
textSize: 16 // 文字的尺寸大小
textSpace: 12 // 文字的间距大小
polygons: [ 0.1, 0.2 ] // 雷达坐标数值的数组（小数0-1）
texts: [ '1', '2' ] // 雷达坐标标题的数组
fontSize: 14 // 字体字号大小
pointColor: '#d5d6f0' // 小圆点颜色
showNumber: true // 显示数值

组件代码：

polygon-custom.vue

<template>
 
  <div class="polygon-container">
    <canvas ref="polygon" id='polygon' class='polygon' width="100" height="100">canvas>
  div>
 
template>
 
 
<style lang="less" scoped>
 
  .polygon-container {
    .polygon {
      display: block;
      width: 3rem;
      height: 3rem;
      margin: 0 auto;
    }
  }
  
style>

组件调用： 

<template>
    <PolygonCustom class='polygon' :polygons='polygons' :texts='texts' :fontSize="10" :areaColor="'rgba(90, 205, 199, 0.35)'" :segmentLineColor="'rgba(90, 205, 199, 0.37)'" :axisTextColor="'#39D1CA'" :edgeNumber="10" :textSize="30" :textSpace="1" :pointColor="'#5ACDC7'" :showNumber="false">PolygonCustom>
template>
 
 
<script>
 
import PolygonCustom from 'xxx'
 
export default {
 
    data() {
        retutn {
            polygons: [], // [0.85, 0, 0.65, 0, 0.8, 0.9, 1, 0.7],
            texts: [], // ['湿热质', '气虚质', '气郁质', '平和质', '痰湿质', '气郁质', '平和质', '痰湿质'],
        }
    },
    
    components: {
        PolygonCustom
    }
 
}
 
script>