hydro-graph 1.0.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 +123 -0
- package/dist/hydro-graph.es.js +29391 -0
- package/dist/hydro-graph.umd.js +121 -0
- package/dist/style.css +1 -0
- package/package.json +36 -0
- package/src/App.vue +103 -0
- package/src/HydroGraph.vue +2586 -0
- package/src/api/index.js +9 -0
- package/src/assets/images/copy.png +0 -0
- package/src/assets/images/exportPng.png +0 -0
- package/src/assets/images/restore.png +0 -0
- package/src/index.js +4 -0
- package/src/index.scss +86 -0
- package/src/main.js +6 -0
- package/src/utils/ruoyi.js +228 -0
package/README.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# HydroGraph 图表组件
|
|
2
|
+
|
|
3
|
+
A Vue 3 component for hydrograph visualization using ECharts
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install hydro-graph
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 依赖
|
|
12
|
+
|
|
13
|
+
- Vue 3
|
|
14
|
+
- ECharts 5
|
|
15
|
+
- Dayjs
|
|
16
|
+
- Element Plus
|
|
17
|
+
|
|
18
|
+
## 使用方法
|
|
19
|
+
|
|
20
|
+
```vue
|
|
21
|
+
<template>
|
|
22
|
+
<div style="width: 100%; height: 500px;">
|
|
23
|
+
<HydroGraph
|
|
24
|
+
:chart-option="chartOption"
|
|
25
|
+
:legend-list="legendList"
|
|
26
|
+
:width="'100%'"
|
|
27
|
+
:height="'100%'"
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup>
|
|
33
|
+
import { ref } from 'vue'
|
|
34
|
+
import HydroGraph from 'hydro-graph'
|
|
35
|
+
|
|
36
|
+
const chartOption = ref({
|
|
37
|
+
title: '水位流量过程线',
|
|
38
|
+
grid: [{
|
|
39
|
+
left: '3%',
|
|
40
|
+
right: '4%',
|
|
41
|
+
bottom: '3%',
|
|
42
|
+
containLabel: true
|
|
43
|
+
}],
|
|
44
|
+
xAxis: [{
|
|
45
|
+
type: 'time'
|
|
46
|
+
}],
|
|
47
|
+
yAxis: [{
|
|
48
|
+
name: '水位(m)',
|
|
49
|
+
type: 'value'
|
|
50
|
+
}, {
|
|
51
|
+
name: '流量(m³/s)',
|
|
52
|
+
type: 'value'
|
|
53
|
+
}],
|
|
54
|
+
series: [{
|
|
55
|
+
name: '实测水位',
|
|
56
|
+
type: 'line',
|
|
57
|
+
yAxisIndex: 0,
|
|
58
|
+
data: [["2024-01-01 00:00", 10.5], ["2024-01-01 01:00", 10.6], ["2024-01-01 02:00", 10.7]]
|
|
59
|
+
}, {
|
|
60
|
+
name: '实测流量',
|
|
61
|
+
type: 'line',
|
|
62
|
+
yAxisIndex: 1,
|
|
63
|
+
data: [["2024-01-01 00:00", 100], ["2024-01-01 01:00", 110], ["2024-01-01 02:00", 120]]
|
|
64
|
+
}]
|
|
65
|
+
})
|
|
66
|
+
|
|
67
|
+
const legendList = ref([{
|
|
68
|
+
name: '实测水位',
|
|
69
|
+
isSelected: true,
|
|
70
|
+
color: '#304755'
|
|
71
|
+
}, {
|
|
72
|
+
name: '实测流量',
|
|
73
|
+
isSelected: true,
|
|
74
|
+
color: '#197e2b'
|
|
75
|
+
}])
|
|
76
|
+
</script>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 参数说明
|
|
80
|
+
|
|
81
|
+
### chartOption
|
|
82
|
+
- 类型: `Object`
|
|
83
|
+
- 默认值: `{}`
|
|
84
|
+
- 说明: ECharts 图表配置项，包含标题、网格、坐标轴、系列等配置
|
|
85
|
+
|
|
86
|
+
### legendList
|
|
87
|
+
- 类型: `Array`
|
|
88
|
+
- 默认值: `[]`
|
|
89
|
+
- 说明: 图例列表，每个对象包含 name、isSelected、color 等属性
|
|
90
|
+
|
|
91
|
+
### width
|
|
92
|
+
- 类型: `String`
|
|
93
|
+
- 默认值: `'100%'`
|
|
94
|
+
- 说明: 图表宽度
|
|
95
|
+
|
|
96
|
+
### height
|
|
97
|
+
- 类型: `String`
|
|
98
|
+
- 默认值: `'100%'`
|
|
99
|
+
- 说明: 图表高度
|
|
100
|
+
|
|
101
|
+
### backgroundColor
|
|
102
|
+
- 类型: `String`
|
|
103
|
+
- 默认值: `'#fff'`
|
|
104
|
+
- 说明: 图表背景色
|
|
105
|
+
|
|
106
|
+
## 功能特性
|
|
107
|
+
|
|
108
|
+
- 支持多种图表类型：折线图、柱状图、标记线等
|
|
109
|
+
- 支持多级图例和图例全选/取消全选
|
|
110
|
+
- 支持右键菜单：还原缩放、复制图片、导出图片
|
|
111
|
+
- 支持水位-库容转换
|
|
112
|
+
- 支持响应式调整
|
|
113
|
+
- 支持图表交互：鼠标悬停提示、点击标记等
|
|
114
|
+
|
|
115
|
+
## 注意事项
|
|
116
|
+
|
|
117
|
+
- 组件依赖 Element Plus 用于图例复选框和下拉菜单
|
|
118
|
+
- 图表数据格式应符合 ECharts 要求，时间序列数据建议使用 `[[时间, 值], [时间, 值]]` 格式
|
|
119
|
+
- 对于大型数据集，建议使用数据分页或虚拟滚动以提高性能
|
|
120
|
+
|
|
121
|
+
## 许可证
|
|
122
|
+
|
|
123
|
+
MIT
|