@antelopecloud/charts

@antelopecloud/charts

基于 recharts 的通用业务图形库

在线文档

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

安装

npm i --save @antelopecloud/charts

开发

npm run storybook

基于storybook ，提供 living 功能

使用

import React from 'react';
import ACComposedChart from '@antelopecloud/charts/ACComposedChart';

const index = () => {
  return (
    <ACComposedChart
      height={400}
      responsive
      data={[
        {
          name: '1',
          a: 200,
          b: 500,
        },
        {
          name: '2',
          a: 500,
          b: 600,
        },
        {
          name: '3',
          a: 300,
          b: 200,
        },
        {
          name: '4',
          a: 200,
          b: 100,
        },
      ]}
      dataKeys={[
        {
          dataKey: 'a',
          icon: 'rect',
          color: 'red',
          chartType: 'bar',
          barSize: 20,
        },
        {
          dataKey: 'b',
          icon: 'rect',
          color: 'blue',
          chartType: 'bar',
          barSize: 20,
        },
      ]}
      xAxis={{ scale: 'point', dataKey: 'name' }}
      type="counting"
    />
  );
};

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[], newDataKeys?: 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' //  流量
  | 'traffic-Byte' // 不除以8
  | '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;
  /**
   * 根据 dataKey对应 相应自定义icon
   * @example
   * {
   *    a: <CustomIcon>,
   *    b:'123',
   *    c:<div />
   * }
   */
  textStyle?: CSSProperties;
  style?: CSSProperties;
}

ACYAxisProps

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

export interface ACYAxisProps extends YAxisProps {
  label?: string | number | Label | LabelProps | object;
  showUnit?: boolean;
  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