# TaroViz

TaroViz

基于 Taro 和 ECharts 的多端图表组件库

npm package npm downloads license

## 📢 最新版本 v1.0.2 我们很高兴地宣布 TaroViz v1.0.2 已正式发布!查看 [更新日志](./CHANGELOG.md) 了解详细信息。 ## 📚 文档 - [API文档](./docs-api/index.html) - [使用指南](./docs/USAGE.md) - [开发指南](./docs/DEVELOPMENT.md) - [示例](./docs/EXAMPLES.md) - [FAQ](./docs/FAQ.md) ## 特性 - 📊 丰富的图表类型 - 📱 多端适配支持(小程序、H5) - 🎨 灵活的主题定制 - 📦 模块化设计 - 🚀 高性能渲染 - 🛠️ 强大的数据处理能力 - 🎯 易用的 React Hooks - 📖 完善的类型定义 ## 快速开始 ### 安装
bash
# npm
npm install @agions/taroviz

# yarn
yarn add @agions/taroviz

# pnpm
pnpm add @agions/taroviz
### 使用
typescript
import { LineChart } from '@agions/taroviz';

const App = () => {
  const data = {
    xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [150, 230, 224, 218, 135]
  };

  return (
    
  );
};
## 包说明 TaroViz 采用 monorepo 管理模式,包含以下核心包: | 包名 | 版本 | 描述 | |------|------|------| | [@agions/taroviz](./packages/all) | [![npm](https://img.shields.io/npm/v/@agions/taroviz.svg)](https://www.npmjs.com/package/@agions/taroviz) | 完整功能包 | | [@agions/taroviz-core](./packages/core) | [![npm](https://img.shields.io/npm/v/@agions/taroviz-core.svg)](https://www.npmjs.com/package/@agions/taroviz-core) | 核心组件 | | [@agions/taroviz-charts](./packages/charts) | [![npm](https://img.shields.io/npm/v/@agions/taroviz-charts.svg)](https://www.npmjs.com/package/@agions/taroviz-charts) | 图表组件 | | [@agions/taroviz-hooks](./packages/hooks) | [![npm](https://img.shields.io/npm/v/@agions/taroviz-hooks.svg)](https://www.npmjs.com/package/@agions/taroviz-hooks) | React Hooks | | [@agions/taroviz-themes](./packages/themes) | [![npm](https://img.shields.io/npm/v/@agions/taroviz-themes.svg)](https://www.npmjs.com/package/@agions/taroviz-themes) | 主题系统 | | [@agions/taroviz-data](./packages/data) | [![npm](https://img.shields.io/npm/v/@agions/taroviz-data.svg)](https://www.npmjs.com/package/@agions/taroviz-data) | 数据处理 | | [@agions/taroviz-adapters](./packages/adapters) | [![npm](https://img.shields.io/npm/v/@agions/taroviz-adapters.svg)](https://www.npmjs.com/package/@agions/taroviz-adapters) | 平台适配器 | ## 示例 ### 折线图
typescript
import { LineChart } from '@agions/taroviz';
import { useTheme } from '@agions/taroviz-hooks';

const LineChartDemo = () => {
  const theme = useTheme();
  
  return (
    
  );
};
### 柱状图
typescript
import { BarChart } from '@agions/taroviz';

const BarChartDemo = () => {
  return (
    
  );
};
## 本地开发
bash
# 克隆仓库
git clone https://github.com/agions/taroviz.git

# 安装依赖
pnpm install

# 启动开发服务
pnpm dev

# 构建
pnpm build

# 运行测试
pnpm test
## 技术栈 - [Taro](https://taro.jd.com/) - 多端统一开发框架 - [ECharts](https://echarts.apache.org/zh/index.html) - 图表库 - [React](https://reactjs.org/) - 用户界面库 - [TypeScript](https://www.typescriptlang.org/) - 类型系统 - [pnpm](https://pnpm.io/) - 包管理器 - [Webpack](https://webpack.js.org/) - 构建工具 ## 兼容性 - 小程序 - 微信小程序 - 支付宝小程序 - 百度小程序 - 字节跳动小程序 - H5 - React Native ## 贡献指南 我们欢迎任何形式的贡献,包括但不限于: - 提交问题和建议 - 改进文档 - 修复 bug - 添加新功能 请查看 [贡献指南](./CONTRIBUTING.md) 了解详细信息。 ## 更新日志 查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的更新历史。 ## 许可证 [MIT License](./LICENSE) © 2025 Agions ## 支持 如果您在使用过程中遇到问题,可以通过以下方式获取帮助: - [GitHub Issues](https://github.com/agions/taroviz/issues)