2.1.1 • Published 1 year ago

@antelopecloud/charts v2.1.1

Weekly downloads
54
License
ISC
Repository
-
Last release
1 year ago

@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输出的数据类型?ACTypecounting
gradient是否开启渐变,默认否,其他值参考 recharts?booleanfalse
tooltip参考 recharts 中 tooltip 属性配置?ACToolTipProps-
legendlengend 配置项?ACRechartsLegendProps-
yAxisY 轴,如果传入数组则为左右两轴?ACYAxisProps | ACYAxisProps[]-
xAxisX 轴ACXAxisProps-
cartesianGrid?CartesianAxisProps-
responsive是否开启自适应?booleanfalse
onLegendChangelegend 改变时回调?(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 轴不为整数,默认开启转换?booleantrue
toolTipTransformDatatoolTip 是否开启转换; 如设置transformData,则为transformData的值?boolean-
2.1.1

1 year ago

2.1.0

1 year ago

2.0.0

1 year ago

1.6.1

2 years ago

1.5.6

2 years ago

1.5.5

2 years ago

1.5.4

2 years ago

1.5.3

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.5.0

2 years ago

1.4.0

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.0

2 years ago

1.2.2

2 years ago

1.2.0

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.4-alpha.0

3 years ago

1.0.5-alpha.0

3 years ago

1.0.3-alpha.0

3 years ago

1.0.6-alpha.0

3 years ago

1.0.2-alpha.0

3 years ago

1.0.0-alpha.4.0

3 years ago