@dfsj/echarts/README.md

专业的水文曲线组件或构造函数以及通用的echart二次封装图表

# @dfsj/echarts

> ECharts 二次封装库，提供水文/工程领域的专业图表组件（库容曲线、断面图、降雨分析等）

[![version](https://img.shields.io/npm/v/@dfsj/echarts.svg)](https://www.npmjs.com/package/@dfsj/echarts)
[![license](https://img.shields.io/npm/l/@dfsj/echarts.svg)](https://github.com/by1773/ec/blob/main/packages/echarts/LICENSE)

## 简介

@dfsj/echarts 是基于 ECharts 的水文工程领域专业图表库，提供库容曲线、断面图、降雨分析、水位流量关系等 10+ 种专业图表 Hooks，封装了统一的数据配置规范和主题体系。

## 主要功能

- **useECharts** - 统一的 ECharts 初始化与管理
- **useAssist** - ECharts 配置项转换工具
- **useCapacity** - 库容曲线图表
- **useDrainageCurves** - 泄洪曲线图表
- **useComplexHydrology** - 复杂水文图表
- **useCrossSection** - 横断面示意图
- **useDamSchematic** - 大坝示意图
- **useStageflow** - 水位流量关系图
- **useRainfall** - 降雨量分析图
- **useHydrology** - 基础水文图表

## 安装

```bash
pnpm add @dfsj/echarts
```

## 快速开始

```vue
<template>
  <div ref="chartRef" style="width: 600px; height: 400px"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useECharts } from '@dfsj/echarts'

const chartRef = ref<HTMLDivElement>()
const { setOptions } = useECharts(chartRef)

setOptions({
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [120, 200, 150] }]
})
</script>
```

## 主要导出

| 导出名 | 类型 | 说明 |
|:------|:-----|:-----|
| `useECharts` | `Function` | 初始化 ECharts 实例 |
| `useAssist` | `Function` | 配置转换工具 |
| `useCapacity` | `Function` | 库容曲线 |
| `useCrossSection` | `Function` | 横断面图 |

> 完整 API 文档请查看 [在线文档站](../docs/zh/echarts/useECharts.md)

## 使用要求

| 环境 | 要求 |
|:-----|:-----|
| Node.js | >=18.12.0 |
| 框架依赖 | Vue >=3.3, echarts >=5.x |

## 开发指南

```bash
git clone http://10.10.12.18/dfsj/dfsj
pnpm install
cd packages/echarts
pnpm watch
```

## 文档

- [快速开始](../docs/zh/guide/get-start.md)
- [完整API文档](../docs/zh/echarts/useECharts.md)
- [更新日志](./CHANGELOG.md)

## 许可证

[MIT](../../LICENSE)

Copyright (c) 2022 - present yangbo