# @lingxiteam/charts

> 基于 [@alitajs/f2](https://github.com/alitajs/f2) 封装的图表组件。帮助你快速的在移动端项目中构建图表。

Latest version **1.0.0** (published 2024-12-23) · 0 weekly downloads

## Install

```sh
npm install @lingxiteam/charts
pnpm add @lingxiteam/charts
yarn add @lingxiteam/charts
bun add @lingxiteam/charts
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-12-23 |
| First published | 2023-03-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 224.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | limanpm, wanerrr, mishi-brother, hammersjs, zhang.guoyong, zzzzjq, diyc, goulili, pengyh, wujian666, taiyangteng, cenxiaolian, xiaohuoni, duan_duan, yaozanwen, brinkr, babelczx |

## Links

- npm: https://www.npmjs.com/package/@lingxiteam/charts
- Repository: https://github.com/alitajs/f2
- Homepage: https://github.com/alitajs/f2#readme
- Issues: https://github.com/alitajs/f2/issues
- npm.io page: https://npm.io/package/@lingxiteam/charts

## Dependencies (6)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [sitemap](https://npm.io/package/sitemap.md) ^6.3.3
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@alitajs/f2](https://npm.io/package/@alitajs/f2.md) 0.0.9
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.23.2
- [@alitajs/tracker](https://npm.io/package/@alitajs/tracker.md) ^0.0.3

## Recent versions

- 1.0.0 (latest) — 2024-12-23
- 0.0.8 — 2023-07-12
- 0.0.7 — 2023-07-12
- 0.0.6 — 2023-07-12
- 0.0.4 — 2023-04-06
- 0.0.3 — 2023-04-06
- 0.0.2 — 2023-03-20
- 0.0.1 — 2023-03-20

## README

# @lingxiteam/charts

基于 [@alitajs/f2](https://github.com/alitajs/f2) 封装的图表组件。帮助你快速的在移动端项目中构建图表。

不支持自定义，只支持展示的几种用法，如果你需要自定义的组件，可以使用 [@alitajs/f2](https://github.com/alitajs/f2) 进行自定义。

## 用法

### 常规用法

```tsx
import React, { useState } from 'react';
import { Donut } from '@lingxiteam/charts';

const ChartDemo = () => {
  const data = [
    {
      name: '余额',
      percent: 2423.0,
    },
    {
      name: '理财产品',
      percent: 423.0,
    },
    {
      name: '黄金',
      percent: 1223.0,
    },
    {
      name: '余额宝',
      percent: 1423.0,
    },
  ];
  return (
    <>
      <Donut
        data={data}
        title="卡片标题"
        type="table1"
        x="name"
        y="percent"
        sumText="5782.70"
        sumTitle="总资产"
      />
    </>
  );
};

export default ChartDemo;
```

![image](./image.webp)

---
_Source: https://npm.io/package/@lingxiteam/charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._