t20260403

Charts Library ESM

一个基于 Angular 18+ 的图表库模块，提供多种类型的图表组件，功能性和美观性与 ECharts 类似。

功能特性

• 饼图组件（5种样式）：

  • 基础饼图
  • 南丁格尔玫瑰图
  • 环形图
  • 渐变色饼图
  • 标签饼图

• 条形图组件（5种样式）：

  • 基础条形图
  • 堆叠条形图
  • 渐变色条形图
  • 圆角条形图
  • 混合条形图

• 柱形图组件（5种样式）：

  • 基础柱形图
  • 堆叠柱形图
  • 渐变色柱形图
  • 圆角柱形图
  • 混合柱形图

• K线图组件（5种样式）：

  • 基础K线图
  • K线图+均线
  • K线图+成交量
  • K线图+刷选
  • 动态K线图

安装

npm install

使用方法

在 Angular 项目中使用

1. 导入所需的图表组件：

   import { 
   PieChartBasicComponent,
   BarChartBasicComponent,
   ColumnChartBasicComponent,
   CandlestickChartBasicComponent
   } from './lib';
   

2. 在组件中使用：

   <lib-pie-chart-basic [data]="pieData" [width]="600" [height]="400"></lib-pie-chart-basic>
   <lib-bar-chart-basic [data]="barData" [width]="600" [height]="400"></lib-bar-chart-basic>
   <lib-column-chart-basic [data]="columnData" [width]="600" [height]="400"></lib-column-chart-basic>
   <lib-candlestick-chart-basic [data]="candlestickData" [width]="600" [height]="400"></lib-candlestick-chart-basic>
   

数据格式

饼图数据格式

const pieData = [
  { value: 1048, name: '搜索引擎' },
  { value: 735, name: '直接访问' },
  { value: 580, name: '邮件营销' }
];

条形图/柱形图数据格式

const barData = [
  { name: '周一', value: 120 },
  { name: '周二', value: 200 },
  { name: '周三', value: 150 }
];

K线图数据格式

const candlestickData = [
  ['2023-01-01', 2320.26, 2320.26, 2287.3, 2362.94],
  ['2023-01-02', 2300, 2291.3, 2288.26, 2308.38],
  ['2023-01-03', 2295.35, 2346.5, 2295.35, 2346.92]
];

开发服务器

运行开发服务器：

npm start

访问 http://localhost:4200/ 查看示例。

构建

构建生产版本：

npm run build

技术栈

• Angular 18+
• ECharts 5.5.0
• TypeScript 5.4.0
• SCSS

项目结构

charts-library-esm/
├── src/
│   ├── app/                    # 应用程序组件
│   ├── lib/                    # 图表库模块
│   │   ├── base-chart.component.ts
│   │   ├── pie-chart.ts
│   │   ├── bar-chart.ts
│   │   ├── column-chart.ts
│   │   ├── candlestick-chart.ts
│   │   ├── charts-library.module.ts
│   │   └── index.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── package.json
├── tsconfig.json
└── angular.json

特性

• 基于 ECharts，提供丰富的图表类型和配置选项
• 响应式设计，支持自适应布局
• 支持自定义数据、尺寸和样式
• 提供多种预设样式，开箱即用
• 完全使用 Angular Standalone Components
• 支持 ESM 模块化

许可证

ISC