@agions/taroviz 1.6.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -21
- package/dist/cjs/index.js +1 -1
- package/dist/esm/index.js +49471 -2199
- package/package.json +2 -1
- package/src/adapters/__tests__/index.test.ts +4 -2
- package/src/adapters/h5/index.ts +16 -0
- package/src/adapters/types.ts +28 -120
- package/src/charts/common/BaseChartWrapper.tsx +193 -32
- package/src/charts/index.ts +5 -1
- package/src/charts/liquid/index.tsx +227 -0
- package/src/charts/liquid/types.ts +130 -0
- package/src/charts/tree/index.tsx +117 -0
- package/src/charts/tree/types.ts +174 -0
- package/src/charts/types.ts +1 -1
- package/src/components/DataFilter/index.tsx +587 -0
- package/src/core/animation/AnimationManager.ts +69 -42
- package/src/core/components/BaseChart.tsx +72 -9
- package/src/core/types/common.ts +21 -110
- package/src/core/types/index.ts +4 -135
- package/src/core/types/platform.ts +38 -230
- package/src/core/utils/drillDown.ts +643 -0
- package/src/core/utils/export/ExportUtils.ts +10 -1
- package/src/core/utils/performance/PerformanceAnalyzer.ts +21 -1
- package/src/core/utils/performance/types.ts +5 -0
- package/src/hooks/__tests__/index.test.tsx +7 -5
- package/src/hooks/index.ts +41 -2
- package/src/hooks/useAnimation.ts +427 -0
- package/src/hooks/useChartConnect.ts +362 -0
- package/src/hooks/useChartDownload.ts +692 -0
- package/src/hooks/useDataZoom.ts +323 -0
- package/src/hooks/usePerformance.ts +291 -0
- package/src/index.ts +25 -2
- package/src/themes/__tests__/index.test.ts +7 -13
- package/src/themes/index.ts +3 -0
- package/src/themes/useAutoTheme.ts +66 -0
package/README.md
CHANGED
|
@@ -10,15 +10,15 @@
|
|
|
10
10
|
<a href="https://www.npmjs.com/package/@agions/taroviz">
|
|
11
11
|
<img src="https://img.shields.io/npm/dm/@agions/taroviz.svg" alt="npm downloads">
|
|
12
12
|
</a>
|
|
13
|
-
<a href="https://github.com/
|
|
13
|
+
<a href="https://github.com/Agions/TaroViz/blob/main/LICENSE">
|
|
14
14
|
<img src="https://img.shields.io/npm/l/@agions/taroviz.svg" alt="license">
|
|
15
15
|
</a>
|
|
16
16
|
</p>
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
|
-
## 📢 最新版本 v1.
|
|
19
|
+
## 📢 最新版本 v1.9.0
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
TaroViz v1.9.0 正式发布!本次更新带来完整的无障碍支持(键盘导航 + 屏幕阅读器)、专业动画预设调优、TypeScript 类型系统全面重构。查看 [更新日志](./CHANGELOG.md) 了解详细信息。
|
|
22
22
|
|
|
23
23
|
## 📚 文档
|
|
24
24
|
|
|
@@ -41,6 +41,8 @@
|
|
|
41
41
|
- 🎯 **标注系统** - 支持 MarkLine、MarkArea 等标注,预设平均线、警戒线等样式
|
|
42
42
|
- 📤 **导出功能** - 支持导出为 PNG、JPEG、SVG、PDF 等格式
|
|
43
43
|
- 🎯 **易用的 React Hooks** - 提供 useChart、useResize、useResponsive、useThemeSwitcher 等 Hooks
|
|
44
|
+
- ♿ **无障碍支持** - 键盘导航(+/- 缩放、方向键平移、Home 重置)、屏幕阅读器数据表
|
|
45
|
+
- 🎬 **专业动画** - 符合设计规范的动画时长和缓动曲线
|
|
44
46
|
- 📖 **完善的类型定义** - 完整的 TypeScript 类型支持,提升开发体验
|
|
45
47
|
- 🛠️ **图表配置生成器** - 支持快速生成 ECharts 配置
|
|
46
48
|
- 🛠️ **代码示例生成器** - 支持 React、Vue、Vanilla 框架
|
|
@@ -102,21 +104,28 @@ export default App;
|
|
|
102
104
|
|
|
103
105
|
## 支持的图表类型
|
|
104
106
|
|
|
105
|
-
TaroViz
|
|
106
|
-
|
|
107
|
-
| 图表类型 | 描述 | 组件名
|
|
108
|
-
| -------- | ---------------------------------- |
|
|
109
|
-
| 折线图 | 用于展示数据随时间或类别变化的趋势 | `LineChart`
|
|
110
|
-
| 柱状图 | 用于比较不同类别的数据大小 | `BarChart`
|
|
111
|
-
| 饼图 | 用于展示数据占比关系 | `PieChart`
|
|
112
|
-
| 散点图 | 用于展示两个变量之间的关系 | `ScatterChart`
|
|
113
|
-
| 雷达图 | 用于展示多维度数据 | `RadarChart`
|
|
114
|
-
| 热力图 | 用于展示数据密度和分布 | `HeatmapChart`
|
|
115
|
-
| 仪表盘 | 用于展示单一指标的进度或状态 | `GaugeChart`
|
|
116
|
-
| 漏斗图 | 用于展示流程中各阶段的数据转化 | `FunnelChart`
|
|
117
|
-
| 矩形树图 | 用于展示带有层级结构的数据 | `TreeMapChart`
|
|
118
|
-
| 旭日图 | 用于展示多层级数据的占比关系 | `SunburstChart`
|
|
119
|
-
| 桑基图 | 用于展示数据流向和转移关系 | `SankeyChart`
|
|
107
|
+
TaroViz 支持 18 种图表类型:
|
|
108
|
+
|
|
109
|
+
| 图表类型 | 描述 | 组件名 |
|
|
110
|
+
| -------- | ---------------------------------- | ------------------- |
|
|
111
|
+
| 折线图 | 用于展示数据随时间或类别变化的趋势 | `LineChart` |
|
|
112
|
+
| 柱状图 | 用于比较不同类别的数据大小 | `BarChart` |
|
|
113
|
+
| 饼图 | 用于展示数据占比关系 | `PieChart` |
|
|
114
|
+
| 散点图 | 用于展示两个变量之间的关系 | `ScatterChart` |
|
|
115
|
+
| 雷达图 | 用于展示多维度数据 | `RadarChart` |
|
|
116
|
+
| 热力图 | 用于展示数据密度和分布 | `HeatmapChart` |
|
|
117
|
+
| 仪表盘 | 用于展示单一指标的进度或状态 | `GaugeChart` |
|
|
118
|
+
| 漏斗图 | 用于展示流程中各阶段的数据转化 | `FunnelChart` |
|
|
119
|
+
| 矩形树图 | 用于展示带有层级结构的数据 | `TreeMapChart` |
|
|
120
|
+
| 旭日图 | 用于展示多层级数据的占比关系 | `SunburstChart` |
|
|
121
|
+
| 桑基图 | 用于展示数据流向和转移关系 | `SankeyChart` |
|
|
122
|
+
| 箱线图 | 用于展示数据分布(统计对比) | `BoxplotChart` |
|
|
123
|
+
| 平行坐标图 | 用于展示高维数据各维度关系 | `ParallelChart` |
|
|
124
|
+
| 关系图 | 用于展示实体之间的关系网络 | `GraphChart` |
|
|
125
|
+
| K线图 | 用于展示金融数据的 OHLC | `CandlestickChart` |
|
|
126
|
+
| 词云图 | 用于展示文本关键词频率 | `WordCloudChart` |
|
|
127
|
+
| 水球图 | 用于展示百分比或进度数据 | `LiquidChart` |
|
|
128
|
+
| 树图 | 用于展示层级结构数据 | `TreeChart` |
|
|
120
129
|
|
|
121
130
|
## 架构说明
|
|
122
131
|
|
|
@@ -295,7 +304,7 @@ export default ScatterChartDemo;
|
|
|
295
304
|
|
|
296
305
|
```bash
|
|
297
306
|
# 克隆仓库
|
|
298
|
-
git clone https://github.com/
|
|
307
|
+
git clone https://github.com/Agions/TaroViz.git
|
|
299
308
|
|
|
300
309
|
# 安装依赖
|
|
301
310
|
pnpm install
|
|
@@ -360,7 +369,7 @@ pnpm run docs:api
|
|
|
360
369
|
|
|
361
370
|
如果您在使用过程中遇到问题,可以通过以下方式获取帮助:
|
|
362
371
|
|
|
363
|
-
- [GitHub Issues](https://github.com/
|
|
372
|
+
- [GitHub Issues](https://github.com/Agions/TaroViz/issues) - 提交问题和建议
|
|
364
373
|
- [在线文档](https://agions.github.io/TaroViz/) - 查看详细文档
|
|
365
374
|
- [示例](https://agions.github.io/TaroViz/examples/) - 参考使用示例
|
|
366
375
|
- [贡献指南](https://agions.github.io/TaroViz/contributing/) - 了解如何贡献代码
|
|
@@ -373,5 +382,5 @@ pnpm run docs:api
|
|
|
373
382
|
|
|
374
383
|
- [Taro 官网](https://taro.jd.com/)
|
|
375
384
|
- [ECharts 官网](https://echarts.apache.org/zh/index.html)
|
|
376
|
-
- [GitHub 仓库](https://github.com/
|
|
385
|
+
- [GitHub 仓库](https://github.com/Agions/TaroViz)
|
|
377
386
|
- [npm 包](https://www.npmjs.com/package/@agions/taroviz)
|