@dfsj/echarts

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

简介

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

主要功能

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

安装

pnpm add @dfsj/echarts

快速开始

<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 文档请查看 在线文档站

使用要求

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

开发指南

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

文档

• 快速开始
• 完整API文档
• 更新日志

许可证

MIT

Copyright (c) 2022 - present yangbo