bizcharts图表封装之基础雷达图

一、基础雷达图的封装

     从官网的demo发现，基础的雷达图有两种，一种是线，一种是面，两者区别仅仅是线的图中没有<Goem type="area"/>，不过此次封装还做了两种的。

  基础雷达图-面

import React from "react";
import {
  Chart,
  Coord,
  Geom,
  Axis,
  Tooltip,
  Legend
} from "bizcharts";

interface IBasicRadarProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  legendName:string;// 分类名称
  height?:number;
  color?:string[];
}

/**
 * 基础雷达图-面
 * @param props
 * @constructor
 */
const BasicRadar:React.FC<IBasicRadarProps>=(props)=>{
  const {height=400,xAxis,yAxis,data,legendName,color}=props;
  return (
    <Chart
      height={height}
      data={data}
      forceFit
    >
      <Coord type="polar" radius={0.8} />
      <Axis
        name={xAxis}
        line={null}
        tickLine={null}
        grid={
  {
          lineStyle: {
            lineDash: null
          },
          hideFirstLine: false
        } as any}
      />
      <Tooltip />
      <Axis
        name="score"
        line={null}
        tickLine={null}
        grid={
  {
          type: "polygon",
          lineStyle: {
            lineDash: null
          },