HydroGraph 图表组件

A Vue 3 component for hydrograph visualization using ECharts

安装

npm install hydro-graph

依赖

• Vue 3
• ECharts 5
• Dayjs
• Element Plus

使用方法

<template>
  <div style="width: 100%; height: 500px;">
    <HydroGraph
      :chart-option="chartOption"
      :legend-list="legendList"
      :width="'100%'"
      :height="'100%'"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HydroGraph from 'hydro-graph'

const chartOption = ref({
  title: '水位流量过程线',
  grid: [{
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  }],
  xAxis: [{
    type: 'time'
  }],
  yAxis: [{
    name: '水位(m)',
    type: 'value'
  }, {
    name: '流量(m³/s)',
    type: 'value'
  }],
  series: [{
    name: '实测水位',
    type: 'line',
    yAxisIndex: 0,
    data: [["2024-01-01 00:00", 10.5], ["2024-01-01 01:00", 10.6], ["2024-01-01 02:00", 10.7]]
  }, {
    name: '实测流量',
    type: 'line',
    yAxisIndex: 1,
    data: [["2024-01-01 00:00", 100], ["2024-01-01 01:00", 110], ["2024-01-01 02:00", 120]]
  }]
})

const legendList = ref([{
  name: '实测水位',
  isSelected: true,
  color: '#304755'
}, {
  name: '实测流量',
  isSelected: true,
  color: '#197e2b'
}])
</script>

参数说明

chartOption

• 类型: Object
• 默认值: {}
• 说明: ECharts 图表配置项，包含标题、网格、坐标轴、系列等配置

legendList

• 类型: Array
• 默认值: []
• 说明: 图例列表，每个对象包含 name、isSelected、color 等属性

width

• 类型: String
• 默认值: '100%'
• 说明: 图表宽度

height

• 类型: String
• 默认值: '100%'
• 说明: 图表高度

backgroundColor

• 类型: String
• 默认值: '#fff'
• 说明: 图表背景色

功能特性

• 支持多种图表类型：折线图、柱状图、标记线等
• 支持多级图例和图例全选/取消全选
• 支持右键菜单：还原缩放、复制图片、导出图片
• 支持水位-库容转换
• 支持响应式调整
• 支持图表交互：鼠标悬停提示、点击标记等

注意事项

• 组件依赖 Element Plus 用于图例复选框和下拉菜单
• 图表数据格式应符合 ECharts 要求，时间序列数据建议使用 [[时间, 值], [时间, 值]] 格式
• 对于大型数据集，建议使用数据分页或虚拟滚动以提高性能

许可证

MIT