@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
color	颜色值	string	-
chartType	图表类型设置	ChartType	-
yAxisId	如设置了 yAxisId，则需要在 yAxis 属性上设置对应的 yAxisId	?string	-
transformData	是否开启转换; 因 flow,bandwidth 1024 转换后 y 轴不为整数，默认开启转换	?boolean	true
toolTipTransformData	toolTip 是否开启转换; 如设置transformData，则为transformData的值	?boolean	-

@antelopecloud/charts

@antelopecloud/charts

安装

开发

使用

ACComposedChart

ACAreaChart

ACCardiogramChart

API

ACComposedChart

ACType

ChartType

ACLegendType

ACRechartsLegendProps

ACYAxisProps

ACXAxisProps

ACToolTipProps

DataKeysItem

DataKeysBaseItem

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@antelopecloud/charts

@antelopecloud/charts

安装

开发

使用

ACComposedChart

ACAreaChart

ACCardiogramChart

API

ACComposedChart

ACType

ChartType

ACLegendType

ACRechartsLegendProps

ACYAxisProps

ACXAxisProps

ACToolTipProps

DataKeysItem

DataKeysBaseItem

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads