Rslib project

Setup

Install the dependencies:

pnpm install

Get started

Build the library:

pnpm build

Build the library in watch mode:

pnpm dev

WinCharts

• 是对Echarts的二次封装，把主题和配置抽离出来，方便使用，在使用过程中可以通过配置项进行修改，也可以通过主题进行修改。

• 使用中需要给图表父容器设置高度，或者是设置图表的高度。

• 参考Echarts

• API

  | 属性名 | 类型 | 默认值 | 描述 | 是否必填 | |:----------------------------|:-----------------------:|---------:|:------------------------------------|:-----| | theme | enum 'light' 或 'dark' | light | 图表主题 | 否 | | sort | enum 'asc' 或 'desc' | 无 | 排序（饼状图和环状图默认desc） | 否 | | color | string[] | 主题配置好的颜色 | 图表上颜色的顺序 | 否 | | chartType | enum WinChartType | 无 | 图表的类型 | 否 | | xAxisLabelRotate | number | 无 | x轴标签旋转的角度 | 否 | | xAxisLabelLength | number | 无 | x轴标签的长度 | 否 | | data | ICharInfo[] | 无 | 图表数据源 | 否 | | extraData | ICharInfo[] | 无 | 双轴图数据源 | 否 | | style | CSSProperties | 无 | 图表行内样式 | 否 | | reserveValueWithLabelType | bolean | 无 | label 与 value 取值互换 （只作用饼图、环图、雷达图图表） | 否 | | yStart | number[] | 无 | y轴的起始值 | 否 | | extraOption | EChartsOption | 无 | 自定义配置项 | 否 | | cycleCenterConfig | ICycleCenterConfig | 无 | 环形图中心配置 | 否 | | seriesConfig | ISeriesConfig | 无 | 自定义series 配置 | 否 |

• WinChartType

export enum WinChartType {
  /**
   * MINI面积图
   */
  MINI_AREA,

  /**
   * 面积图
   */
  AREA,

  /**
   * 双轴图
   */
  DUAL_LINE_BAR,

  /**
   * 柱状图
   */
  COLUMN,

  /**
   * 堆叠柱状图
   */
  STACK_COLUMN,

  /**
   * 折线图
   */
  LINE,

  /**
   * 条形图
   */
  BAR,

  /**
   * 漏斗图
   */
  FUNNEL,

  /**
   * 饼图
   */
  PIE,

  /**
   * 环形图
   */
  CYCLE,

  /**
   * 雷达图
   */
  RADAR,
}

• ICharInfo

/**
 * 标准图表数据
 */
export interface ICharInfo {
  label: string;
  value: number;
  type?: string;
}

• ICycleCenterConfig

interface ICycleConfig {
  top?: number;
  value?: number;
  fontSize?: number;
  fontWeight?: FontWeight;
  fill?: string;
}

export type ICycleCenterConfig = EChartsOption['graphic'] & {
  title?: ICycleConfig;
  content?: ICycleConfig;
}

• 使用示例

import { RequestWrapper } from 'components_app/RequestWrapper';
import { WinCharts, WinChartType } from '@winfd/win-charts';
import styled from 'styled-components';

const data = [
  { label: '衬衫', value: 100, type: '衬衫1' },
  { label: '羊毛衫', value: 200, type: '衬衫2' },
  { label: '雪纺衫', value: 300, type: '衬衫3' },
  { label: '衬衫2', value: 400, type: '衬衫4' },
  { label: '羊毛衫3', value: 200, type: '衬衫5' },
  { label: '雪纺衫4', value: 100, type: '衬衫6' },
];

const App = () => {
  return (
    <div>
      <ChartWrapper>
        <WinCharts
          data={data ?? []}
          chartType={WinChartType.PIE}
        />
      </ChartWrapper>
    </div>
  );
}
/**
 * 需要给WinCharts的容器添加高度
 */
const ChartWrapper = styled.div`
  width: 400px;
  height: 220px;
`;