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 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} innerRadius={0.6} />
      <Axis name="percent" />
      <Legend />
      <Tooltip
        showTitle={false}
      />
      <Geom
        type="intervalStack"
        position="percent"
        color={color ? [`${xAxis}`, color] : xAxis}
        style={{
          lineWidth: 1,
          stroke: '#fff',
        }}
      >
        <Label
          content="percent"
          formatter={(val:number, item:any) => {
            return `${item.point[xAxis]  }: ${  val}`;
          }}
        />
      </Geom>
    </Chart>
  );
};


export default BasicDonut;

二、使用

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 {maxLen} from "@/pages/charts/utils/chartsCommon";

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 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 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' />
    </div>
  );
}
export default ChartsIndex;