bizcharts图表封装之基础饼图

一、基础饼图“分类”及不同分类后的封装

1.1分类

       基础饼图表现形式一样，但是按照使用上的不同，基础饼图封装分为两类：组件（前端）计算所占百分比和接口（后端计算百分比）。区别如下：

    组件计算百分比（百分比饼图）：①、需要前端手动处理接口数据；②、需要处理保留到小数点后x位；③、各个item所占比例和最大限度接近100%；

   接口返回百分比：①、直接使用接口数据（后端处理数据以及小数点问题）；②、一般情况下，后端返回的百分比不带“%”,前端需要手动增加；③、各item所占比例和不一定接近100%（取决于后端数据）

  开发中使用：

          开发中，建议使用第一种，即百分比饼图

1.2百分比饼图封装

import React from "react";
import {Axis, Chart, Geom, Legend, Tooltip,Coord} from "bizcharts";
// @ts-ignore
import DataSet from '@antv/data-set';

interface IBasicPieProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  color?: string[];
  height?: number;
}

/**
 * 基础饼图
 *    接口返回对应数据即可（不需要计算到具体百分比）
 *     ===》各item所占比例和最大限度接近100%
 * @param props
 * @constructor
 */
const BasicPie: React.FC<IBasicPieProps> = (props) => {
  const {height = 400, xAxis, yAxis, data, color} = props;
  const ds = new DataSet();
  const  dv = ds
    .createView()
    .source(data)
    .transform({
      type: "percent",
      field: yAxis,
      dimension: xAxis,
      as: "percent"
    });
  const cols = {
    percent: {
      min: 0,
      formatter(val:number) {
        // 保留两位小数
        return `${(val * 100).toFixed(2)  }%`;
      }
    }
  };

  return (
      <Chart height={height} data={dv} forceFit scale={cols}>
        <Coord type="theta" radius={0.75} />
        <Axis name="percent" />
        <Legend />
        <Tooltip
          showTitle={false}
        />
        <Geom
          type="intervalStack"
          position="percent"
          color={color ? [`${xAxis}`, color] : xAxis}
          style={{
            lineWidth: 1,
            stroke: '#fff',
          }}
        />
      </Chart>
  );
};


export default BasicPie;

1.3接口计算百分比的饼图封装

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


interface IBasicPie2Props {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  color?: string[];
  height?: number;
}

/**
 * 基础饼图
 *    接口返回计算后的百分比（后端需要计算后再返回）
 *    ===>所有item所占百分和不一定接近100%（取决于后端返回值）
 * @param props
 * @constructor
 */
const BasicPie2: React.FC<IBasicPie2Props> = (props) => {

  const {height = 400, xAxis, yAxis, data, color} = props;
  const cols={};
  cols[yAxis]={
    formatter(val:number) {
      // 保留两位小数
      return `${val}%`;
    }
  }
  return (
      <Chart height={height} data={data} forceFit  scale={cols}>
        <Coord type="theta" radius={0.75} />
        <Axis name={yAxis} />
        <Legend />
        <Tooltip
          showTitle={false}
        />
        <Geom
          type="intervalStack"
          position={yAxis}
          color={color ? [`${xAxis}`, color] : xAxis}
          style={{
            lineWidth: 1,
            stroke: '#fff',
          }}
        />
      </Chart>
  );
};


export default BasicPie2;

 

二、使用

import React,{memo}  from 'react';
import BasicPie from "@/pages/charts/compnent/BasicPie";
import BasicPie2 from "@/pages/charts/compnent/BasicPie2";

const BasicPieMemo=memo(BasicPie);
const BasicPie2Memo=memo(BasicPie2);

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 basicPieData= [
  {
    year: "1991",
    value: 30.3
  },
  {
    year: "1992",
    value:20.3
  },
  {
    year: "1993",
    value: 30.3
  },
  {
    year: "1994",
    value:20.3
  },
];
const ChartsIndex:React.FC<{}>=()=>{

  return(
    <div style={{background:'white'}}>
      <h1>bizCharts图表封装</h1>
      <h2>饼图-基础饼图-前端自动计算百分比</h2>
      <BasicPieMemo data={basicLineData} xAxis='year' yAxis='value' />
      <h2>饼图-基础饼图-后端计算百分比</h2>
      <BasicPie2Memo data={basicPieData} xAxis='year' yAxis='value' />
    </div>
  );
}
export default ChartsIndex;