@publishfx/publish-chart

基于新架构设计的 React 图表组件库，支持离线分析模块使用的所有图表类型。

安装

``bash
npm install @publishfx/publish-chart


或


pnpm add @publishfx/publish-chart
`

特性

- 🎨 丰富的图表类型：柱状图、折线图、组合图等
- 🏗️ 新架构设计：依赖注入、服务化、配置驱动
- 🔧 类型安全：完整的 TypeScript 支持
- 📦 按需引入：独立的包，不影响其他组件
- 🎯 易于扩展：清晰的架构，易于添加新图表类型

快速开始

$3

#### 完整配置（推荐）

`tsx
import {
ChartProvider,
defaultChartConfig,
createFormatterService,
createDataTransformService
} from '@publishfx/publish-chart';

const chartServices = {
formatter: createFormatterService(),
dataTransform: createDataTransformService(),
config: {
...defaultChartConfig,
indicatorMap: {
// 指标映射表
},
},
};




`

#### 仅定义业务组件（其他使用默认值）

如果你只需要自定义业务组件，其他服务使用库的默认配置，可以这样：

`tsx
import { ChartProvider } from '@publishfx/publish-chart';

// 只定义 businessComponents，其他使用默认值
const chartServices = {
businessComponents: {
NodeDetail: YourNodeDetailComponent,
NodeGeom: YourNodeGeomComponent,
},
};




`

> 注意：ChartProvider 支持部分覆盖，未提供的字段（formatter、dataTransform、config）会自动使用默认值。

$3

`tsx
import { BarChart, LineChart, BarLineChart } from '@publishfx/publish-chart';

data={data}
x="groupName"
y="indicatorValue"
height={300}
/>
`

组件列表

$3


- BarChart - 基础柱状图
- LineChart - 基础折线图

$3

- BarLineChart - 柱状折线组合图
- GroupBarLine - 分组柱状折线组合图
- BarLineAdapter - 数据适配器组件

$3

- AuxiliaryLine - 辅助线组件
- XAxisBackground - X轴背景高亮组件

架构设计

$3

1. 依赖注入架构：通过 Context 注入服务，解耦组件和业务逻辑
2. 类型适配器：独立的类型定义，通过适配器转换业务类型
3. 服务化架构：将业务逻辑提取为服务，便于测试和复用
4. 配置驱动：统一的配置管理，支持自定义

$3

`
src/
├── core/ # 核心功能
│ ├── ChartContext.tsx # 图表上下文
│ ├── ChartConfig.ts # 配置管理
│ └── ChartTypes.ts # 类型定义
├── adapters/ # 适配器层
│ ├── DataAdapter.ts # 数据适配器
│ └── TypeAdapter.ts # 类型适配器
├── services/ # 服务层
│ ├── FormatterService.ts # 格式化服务
│ └── DataTransformService.ts # 数据转换服务
├── components/ # 组件层
│ ├── base/ # 基础组件
│ ├── composite/ # 组合组件
│ └── shared/ # 共享组件
└── utils/ # 工具函数
``

文档

详细文档请参考：
- 使用指南
- API 文档
- 迁移指南

许可证

ISC