一、基础雷达图的封装

     从官网的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 (<Chartheight={height}data={data}forceFit><Coord type="polar" radius={0.8} /><Axisname={xAxis}line={null}tickLine={null}grid={{lineStyle: {lineDash: null},hideFirstLine: false} as any}/><Tooltip /><Axisname="score"line={null}tickLine={null}grid={{type: "polygon",lineStyle: {lineDash: null},alternateColor: "rgba(0, 0, 0, 0.04)"} as any}/><Legend /><Geomtype="area"position={`${xAxis}*${yAxis}`}color={color ? [`${legendName}`, color] : legendName}/><Geom type="line" position={`${xAxis}*${yAxis}`} size={2}color={color ? [`${legendName}`, color] : legendName}/><Geomtype="point"position={`${xAxis}*${yAxis}`}size={4}shape="circle"color={color ? [`${legendName}`, color] : legendName}/></Chart>);
}export default BasicRadar;

  基础雷达图-线

import React from "react";
import {Chart,Coord,Geom,Axis,Tooltip,Legend
} from "bizcharts";interface IBasicRadar2Props {data: any[]; // 数据源xAxis: string; // x轴坐标yAxis: string; // y轴坐标legendName:string;// 分类名称height?:number;color?:string[];
}/*** 基础雷达图-线* @param props* @constructor*/
const BasicRadar2:React.FC<IBasicRadar2Props>=(props)=>{const {height=400,xAxis,yAxis,data,legendName,color}=props;return (<Chartheight={height}data={data}forceFit><Coord type="polar" radius={0.8} /><Axisname={xAxis}line={null}tickLine={null}grid={{lineStyle: {lineDash: null},hideFirstLine: false} as any}/><Tooltip /><Axisname="score"line={null}tickLine={null}grid={{type: "polygon",lineStyle: {lineDash: null},alternateColor: "rgba(0, 0, 0, 0.04)"} as any}/><Legend /><Geom type="line" position={`${xAxis}*${yAxis}`} size={2}color={color ? [`${legendName}`, color] : legendName}/><Geomtype="point"position={`${xAxis}*${yAxis}`}size={4}shape="circle"color={color ? [`${legendName}`, color] : legendName}/></Chart>);
}export default BasicRadar2;

二、使用

import React,{memo}  from 'react';
import BasicLine from "@/pages/charts/compnent/BasicLine";
import Cured from "@/pages/charts/compnent/Curved";
import BasicColumn from "@/pages/charts/compnent/BasicColumn";
import GroupedColumn from "@/pages/charts/compnent/GroupedColumn";
import StackedColumn from "@/pages/charts/compnent/StackedColumn";
import BasicArea from "@/pages/charts/compnent/BasicArea";
import Bubbles from "@/pages/charts/compnent/Bubbles";
import StackedPercentageColumn from "@/pages/charts/compnent/StackedPercentageColumn";
import StackedPercentageArea from "@/pages/charts/compnent/StackedPercentageArea";
import BasicPie from "@/pages/charts/compnent/BasicPie";
import BasicPie2 from "@/pages/charts/compnent/BasicPie2";
import BasicDonut from "@/pages/charts/compnent/BasicDonut";
import BasicRadar from "@/pages/charts/compnent/BasicRadar";import {maxLen} from "@/pages/charts/utils/chartsCommon";
import BasicRadar2 from "@/pages/charts/compnent/BasicRadar2";const BasicLineMemo=memo(BasicLine);
const CuredMemo=memo(Cured);
const BasicColumnMemo=memo(BasicColumn);
const GroupedColumnMemo=memo(GroupedColumn);
const StackedColumnMemo=memo(StackedColumn);
const BasicAreaMemo=memo(BasicArea);
const BubblesMemo=memo(Bubbles);
const StackedPercentageColumnMemo=memo(StackedPercentageColumn);
const StackedPercentageAreaMemo=memo(StackedPercentageArea);
const BasicPieMemo=memo(BasicPie);
const BasicPie2Memo=memo(BasicPie2);
const BasicDonutMemo=memo(BasicDonut);
const BasicRadarMemo=memo(BasicRadar);const basicLineData= [{year: "1991",value: 3},{year: "1992",value: 4},{year: "1993",value: 3.5},{year: "1994",value: 5},{year: "1995",value: 4.9},{year: "1996",value: 6},{year: "1997",value: 7},{year: "1998",value: 9},{year: "1999",value: 13}
];
const doubleData= [{month: "Jan",city: "Tokyo",temperature: 7},{month: "Jan",city: "London",temperature: 3.9},{month: "Feb",city: "Tokyo",temperature: 6.9},{month: "Feb",city: "London",temperature: 4.2},{month: "Mar",city: "Tokyo",temperature: 9.5},{month: "Mar",city: "London",temperature: 5.7},{month: "Apr",city: "Tokyo",temperature: 14.5},{month: "Apr",city: "London",temperature: 8.5},{month: "May",city: "Tokyo",temperature: 18.4},{month: "May",city: "London",temperature: 11.9},{month: "Jun",city: "Tokyo",temperature: 21.5},{month: "Jun",city: "London",temperature: 15.2},{month: "Jul",city: "Tokyo",temperature: 25.2},{month: "Jul",city: "London",temperature: 17},{month: "Aug",city: "Tokyo",temperature: 26.5},{month: "Aug",city: "London",temperature: 16.6},{month: "Sep",city: "Tokyo",temperature: 23.3},{month: "Sep",city: "London",temperature: 14.2},{month: "Oct",city: "Tokyo",temperature: 18.3},{month: "Oct",city: "London",temperature: 10.3},{month: "Nov",city: "Tokyo",temperature: 13.9},{month: "Nov",city: "London",temperature: 6.6},{month: "Dec",city: "Tokyo",temperature: 9.6},{month: "Dec",city: "London",temperature: 4.8}
];
const  basicColumnData = [{year: "1951 年",sales: 38},{year: "1952 年",sales: 52},{year: "1956 年",sales: 61},{year: "1957 年",sales: 145},{year: "1958 年",sales: 48},{year: "1959 年",sales: 38},{year: "1960 年",sales: 38},{year: "1962 年",sales: 38},{year: "1969 年",sales: 68}
];
const basicColumnData2=[{x: "分类一",y: [76, 100]},{x: "分类二",y: [56, 108]},{x: "分类三",y: [38, 129]},{x: "分类四",y: [58, 155]},{x: "分类五",y: [45, 120]},{x: "分类六",y: [23, 99]},{x: "分类七",y: [18, 56]},{x: "分类八",y: [18, 34]}
];
const stackedData= [{country: "Europe",year: "1750",value: 163},{country: "Europe",year: "1800",value: 203},{country: "Europe",year: "1850",value: 276},{country: "Europe",year: "1900",value: 408},{country: "Europe",year: "1950",value: 547},{country: "Europe",year: "1999",value: 729},{country: "Europe",year: "2050",value: 628},{country: "Europe",year: "2100",value: 828},{country: "Asia",year: "1750",value: 502},{country: "Asia",year: "1800",value: 635},{country: "Asia",year: "1850",value: 809},{country: "Asia",year: "1900",value: 947},{country: "Asia",year: "1950",value: 1402},{country: "Asia",year: "1999",value: 3634},{country: "Asia",year: "2050",value: 5268},{country: "Asia",year: "2100",value: 7268},{country: "Asia",year: "2200",value: 7568},{country: "Europe",year: "2200",value: 7568}
];
const basicPieData= [{year: "1991",value: 30.3},{year: "1992",value:20.3},{year: "1993",value: 30.3},{year: "1994",value:20.3},
];
const donutData = [{item: "事例一",count: 40},{item: "事例二",count: 21},{item: "事例三",count: 17},{item: "事例四",count: 13},{item: "事例五",count: 9}
];
const BasicRadar2Memo=memo(BasicRadar2);
const ChartsIndex:React.FC<{}>=()=>{return(<div style={{background:'white'}}><h1>bizCharts图表封装</h1><h2>折线图-单条</h2><BasicLineMemo data={basicLineData} xAxis='year' yAxis='value' maxLen={maxLen}/><h2>折线图-多条</h2><CuredMemo data={doubleData} xAxis="month" yAxis="temperature" legendName="city" maxLen={maxLen}/><h2>柱状图-单条</h2><BasicColumnMemo data={basicColumnData} xAxis="year" yAxis="sales"  maxLen={maxLen}/><h2>柱状图-单条-区间柱状图：区别只是数据（格式）不同</h2><BasicColumnMemo data={basicColumnData2} xAxis="x" yAxis="y"  maxLen={maxLen}/><h2>柱状图-多条</h2><GroupedColumnMemo data={doubleData} xAxis="month" yAxis="temperature" legendName="city" maxLen={maxLen}/><h2>柱状图-多条-堆叠柱状图</h2><StackedColumnMemo data={doubleData} xAxis="month" yAxis="temperature" legendName="city" maxLen={maxLen}/><h2>面积图-单-基础面积图</h2><BasicAreaMemo  data={basicLineData} xAxis='year' yAxis='value' maxLen={maxLen}/><h2>面积图-多-多面积图</h2><BubblesMemo  data={doubleData} xAxis="month" yAxis="temperature" legendName="city" maxLen={maxLen}/><h2>柱状图-多-百分比堆积柱状图</h2><StackedPercentageColumnMemo data={stackedData} xAxis="year" yAxis="value" legendName="country" maxLen={maxLen}/><h2>面积图-多-百分比堆叠面积图</h2><StackedPercentageAreaMemo data={stackedData} xAxis="year" yAxis="value" legendName="country" maxLen={maxLen}/><h2>饼图-基础饼图-前端自动计算百分比</h2><BasicPieMemo data={basicLineData} xAxis='year' yAxis='value' /><h2>饼图-基础饼图-后端计算百分比</h2><BasicPie2Memo data={basicPieData} xAxis='year' yAxis='value' /><h2>饼图-基础环图-前端自动计算百分比</h2><BasicDonutMemo  data={donutData} xAxis='item' yAxis='count' /><h2>基础雷达图</h2><BasicRadarMemo data={doubleData} xAxis="month" yAxis="temperature" legendName="city"/><h2>基础雷达图-线</h2><BasicRadar2Memo data={doubleData} xAxis="month" yAxis="temperature" legendName="city"/></div>);
}
export default ChartsIndex;