bizcharts图表封装之基础环图

一、基础环图组件封装

    说明：

           建议接口（后端）直接返回每个item对应的value（不需要计算出百分比），此次封装也只是基于后端不处理百分比处理的

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

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

/**
 * 基础环图
 *    建议后端直接返回对应的数值（即后端不需要处理成百分比）
 * @param props
 * @constructor
 */
const BasicDonut: React.FC<IBasicDonutProps> = (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 co