@antelopecloud/charts

基于 recharts 的通用业务图形库

在线文档

放在 github page 上，需要科学上网

v2.0 基于 react 17 和 recharts 2.0

安装

npm i --save @antelopecloud/charts

开发

npm run demo

使用

ACComposedChart

import React from 'react';
import { ACComposedChart } from '@antelopecloud/charts';
import { ReferenceLine } from 'recharts';
const data = [
  {
    name: 'Page A',
    uv: 590,
    pv: 800,
    amt: 1400,
    rate: 40,
  },
  {
    name: 'Page B',
    uv: 868,
    pv: 967,
    amt: 1506,
    rate: 50,
  },
  {
    name: 'Page C',
    uv: 1397,
    pv: 1098,
    amt: 989,
    rate: 30,
  },
  {
    name: 'Page D',
    uv: 1480,
    pv: 1200,
    amt: 1228,
    rate: 70,
  },
  {
    name: 'Page E',
    uv: 1520,
    pv: 1108,
    amt: 1100,
    rate: 50,
  },
  {
    name: 'Page F',
    uv: 1400,
    pv: 680,
    amt: 1700,
    rate: 80,
  },
 ]
const index = () => {
  return (
    <ACComposedChart
      height={400}
      responsive
      data={data}
      dataKeys={[
        {
          dataKey: 'amt',
          icon: 'rect',
          color: '#99CCCC',
          chartType: 'area',
          yAxisId: 'left',
        },
        {
          dataKey: 'pv',
          icon: 'rect',
          color: '#FFCC99',
          chartType: 'bar',
          yAxisId: 'left',
          opacity: 0.4,
        },
        {
          dataKey: 'uv',
          icon: 'line',
          color: '#3399CC',
          chartType: 'line',
          yAxisId: 'left',
        },
        {
          dataKey: 'rate',
          icon: 'line',
          color: '#663366',
          chartType: 'line',
          yAxisId: 'right',
          unit: '%',
          transformData: false,
        },
      ]}
      xAxis={{ dataKey: 'name' }}
      yAxis={[
        { yAxisId: 'left' },
        {
          yAxisId: 'right',
          orientation: 'right',
          domain: [0, 100],
          unit: '%',
        },
      ]}
      type="counting"
      >
      <ReferenceLine
        key="ReferenceLiney"
        y={1000}
        strokeDasharray="3 3"
        stroke="#FF0000"
        label={{
          position: 'insideTopRight',
            value: '合格线',
              fill: '#FF0000',
                fontSize: 12,
        }}
        yAxisId="left"
        />
      ,
      <ReferenceLine
        key="ReferenceLinex"
        x="Page C"
        stroke="red"
        label="Max Page C PAGE"
        yAxisId="right"
        />
    </ACComposedChart>
  );
};

ACAreaChart

const data1 = [
  {
    name: '11',
    a: 200011000000,
    b: 7100,
    c: 5000,
    d: 10,
  },
  {
    name: '22',
    a: 5000,
    b: -320000,
    c: 6000,
    d: 30,
  },
  {
    name: '33',
    a: 300,
    b: 8000,
    c: 2000,
    d: 60,
  },
  {
    name: '44',
    a: 200,
    b: 1000,
    c: 1000,
    d: 20,
  },
];

const index = ()=>{
return (

   <ACAreaChart
        height={400}
        width={1300}
        data={data1}
        dataKeys={[
          {
            dataKey: 'a',
            icon: 'rect',
            color: '#3399CC',
            yAxisId: 'left',
            stackId: '1',
          },
          {
            dataKey: 'b',
            icon: 'rect',
            color: '#666699',
            yAxisId: 'left',
            stackId: '1',
          },
          {
            dataKey: 'c',
            icon: 'rect',
            color: '#996699',
            yAxisId: 'left',
            stackId: '1',
          },
          {
            dataKey: 'd',
            icon: 'rect',
            color: '#003366',
            yAxisId: 'right',
            transformData: false,
            unit: '%',
          },
        ]}
        type="disc-io"
        xAxis={{ scale: 'point', dataKey: 'name' }}
        yAxis={[
          { yAxisId: 'left', orientation: 'left' },
          {
            yAxisId: 'right',
            orientation: 'right',
            dataKey: 'd',
            domain: [0, 100],
            unit: '%',
          },
        ]}
        tooltip={{ showUnit: false }}
      >
        {(obj: any) => {
          return [
            <ReferenceLine
              key="ReferenceLiney"
              y={5000}
              strokeDasharray="3 3"
              stroke="#FF0000"
              label={{
                position: 'insideTopRight',
                value: '合格线',
                fill: '#FF0000',
                fontSize: 12,
              }}
              yAxisId="left"
            />,
            <ReferenceLine
              key="ReferenceLinex"
              x="22"
              stroke="red"
              label="Max 22 PAGE"
              yAxisId="left"
            />,
          ];
        }}
      </ACAreaChart>

)

}

ACCardiogramChart

import React, { useEffect, useState } from 'react';
import { ACCardiogramChart } from '@antelopecloud/charts';
// @ts-ignore
import { ReferenceLine } from 'recharts';

function generateInitData() {
  const result: any[] = [];

  for (let i = 0; i <= 60; i++) {
    result.push({
      y: 0,
      x: i,
    });
  }

  return result;
}

const ACCardiogramChartDemo = () => {
  const [data, setData] = useState<any[]>(generateInitData());

  useEffect(() => {
    const timer = setInterval(() => {
      data.unshift({
        y: Math.random() * 100 + 50,
        x: 0,
      });

      if (data.length > 60) {
        data.pop();
      }
      const newData: any[] = [];

      data.forEach((item, index) => {
        newData.push({ x: index, y: item.y });
      });
      setData(newData);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
   <ACCardiogramChart
     type="percent"
     data={data}
     color="#3399CC"
     max={1000}
   ></ACCardiogramChart>
  );
};

API

ACComposedChart

| 参数 | 说明 | 类型 | 默认值 | | -------------- | ----------------------------------------- | ------------------------------------------------------------ | -------- | | data | 数据源 | any[] | [] | | dataKeys | 数据对应的 key 值属性配置，包括图表类型等 | DataKeysItem[] | [] | | width | 宽度，需要赋值才能渲染 | number | - | | height | 高度，需要赋值才能渲染 | number | - | | type | 输出的数据类型 | ?ACType | counting | | gradient | 是否开启渐变，默认否,其他值参考 recharts | ?boolean | false | | tooltip | 参考 recharts 中 tooltip 属性配置 | ?ACToolTipProps | - | | legend | lengend 配置项 | ?ACRechartsLegendProps | - | | yAxis | Y 轴，如果传入数组则为左右两轴 | ?ACYAxisProps | ACYAxisProps[] | - | | xAxis | X 轴 | ACXAxisProps | - | | cartesianGrid | | ?CartesianAxisProps | - | | responsive | 是否开启自适应 | ?boolean | false | | onLegendChange | legend 改变时回调 | ?(disabledKeys?: any[]) => void | |

注意，剩余的配置可参考 recharts 官网中的 Charts 属性进行配置

如果需要添加 recharts 组件，可参照以下写法

import { ReferenceLine } from 'recharts';

<ACComposedChart
  height={400}
  responsive
  data={[
    {
      name: '11',
      a: 200,
      b: 500,
      c: 100,
    },
    {
      name: '22',
      a: 500,
      b: 600,
      c: 200,
    },
    {
      name: '33',
      a: 300,
      b: 200,
      c: 300,
    },
    {
      name: '44',
      a: 200,
      b: 100,
      c: 400,
    },
  ]}
  dataKeys={[
    {
      dataKey: 'a',
      icon: 'rect',
      color: '#3399CC',
      chartType: 'area',
      stackId: '1',
    },
    {
      dataKey: 'b',
      icon: 'rect',
      color: '#666699',
      chartType: 'area',
      stackId: '1',
    },
    {
      dataKey: 'c',
      icon: 'rect',
      color: '#CCCCCC',
      chartType: 'area',
      stackId: '1',
    },
  ]}
  type="counting"
  xAxis={{ scale: 'point', dataKey: 'name' }}
>
  {() => {
    return (
      <ReferenceLine
        y={400}
        strokeDasharray="3 3"
        stroke="#FF0000"
        label={{
          position: 'insideTopRight',
          value: '合格线',
          fill: '#FF0000',
          fontSize: 12,
        }}
      />
    );
  }}
</ACComposedChart>;

ACType

export declare type ACType =
  | 'bandwidth' // 带宽
  | 'traffic' //  流量 展示b
  | 'traffic-Byte' // 展示B
  | 'disc-io' // 磁盘写入
  // | 'percent' // 百分比
  | 'time' // 纳秒开始
  | 'counting' // 计数
  | undefined;

ChartType

type ChartType = 'area' | 'line' | 'bar';

ACLegendType

type ACLegendType = 'line' | 'composer';

ACRechartsLegendProps

interface ACRechartsLegendProps extends RechartsLegendProps {
  /**
   * 是否展示legend,默认为是
   * @default true
   */
  show?: boolean;
  style?: CSSProperties;
}

ACYAxisProps

import { YAxisProps, Label, LabelProps } from 'recharts';

export interface ACYAxisProps extends YAxisProps {
  label?: string | number | Label | LabelProps | object;
  showUnit?: boolean;
  // 是否开启转换; 因 flow,bandwidth 1024 转换后 y 轴不为整数，默认开启转换
  transformData?: boolean; //默认为true
}

ACXAxisProps

import { XAxisProps } from 'recharts';

export interface ACXAxisProps extends XAxisProps {}

ACToolTipProps

| 参数 | 说明 | 类型 | 默认值 | | ------------ | -------------------------------------------------------------------------------------------- | ------------------------------- | ------ | | legendType | 如果为 line,则显示折线图标；composer 为显示默认图片，通过配置显示折线图标 | ACLegendType | - | | lineIcon | 中文名与 item 相符的，展示折线图标 | string | - | | nameWidth | 通过计算 yDataKeys 计算获得的最大宽度，防止样式错乱（之后考虑用 table 实现，将会废除此属性） | string|number | - | | totalUnit | 在使用 formatter 时，是否显示合计项的单位 | string | - | | description | 头部描述信息 | string | - | | originalData | 原始数据，type 为 bandwidth 和 traffic 时用来获取精确值 | any[] | - |

DataKeysItem

import { AreaProps, LineProps, BarProps } from 'recharts';
type DataKeysItem = DataKeysBaseItem & (AreaProps | LineProps | BarProps);

DataKeysBaseItem

| 参数 | 说明 | 类型 | 默认值 | | -------------------- | ------------------------------------------------------------ | ---------------------------- | ------ | | dataKey | 对应 data 中的一个 key 值 | string | - | | icon | 在 legend 中展示的图标 | rect | line | ReactElement | - | | color | 颜色值 | string | - | | chartType | 图表类型设置 | ChartType | - | | yAxisId | 如设置了 yAxisId，则需要在 yAxis 属性上设置对应的 yAxisId | ?string | - | | transformData | 是否开启转换; 因 flow,bandwidth 1024 转换后 y 轴不为整数，默认开启转换 | ?boolean | true | | toolTipTransformData | toolTip 是否开启转换; 如设置transformData，则为transformData的值 | ?boolean | - | | | | | |