Schinta Chart WL Flow

水位流量图表组件，基于 Vue 3 和 Ant Design Vue、ECharts 开发。

概述

WaterLevelFlowChart 是一个功能完整的水位流量数据可视化组件，支持多种数据类型的图表展示、数据表格显示、统计指标展示等功能。组件采用 ECharts 作为图表引擎，支持深色和浅色两种主题模式。

安装

npm install schinta-chart-wl-flow

使用方法

全局注册

import { createApp } from "vue";
import App from "./App.vue";
import SchintaChartWlFlow from "schinta-chart-wl-flow";
import "schinta-chart-wl-flow/dist/style.css";

const app = createApp(App);
app.use(SchintaChartWlFlow);
app.mount("#app");

局部注册

<script setup>
import { WaterLevelFlowChart } from "schinta-chart-wl-flow";
</script>

简单示例

<template>
  <WaterLevelFlowChart
    :theme="theme"
    :is-expand="isExpand"
    :data-obj="dataObj"
    :character-wl-list="characterWlList"
    :option="customOption"
    :rain-date-list="rainDateList"
  />
</template>

属性

| 属性名 | 类型 | 默认值 | 说明 | | ---------------- | -------- | ------------ | ------------------------------ | | theme | String | 'light' | 主题，可选值：'light'、'dark' | | isExpand | Boolean | false | 是否展开 | | showDatePicker | Boolean | true | 是否显示日期选择器 | | datePickerFormat | String | 'YYYY-MM-DD' | 日期选择器格式 | | dataObj | Object | {} | 图表数据对象 | | itemList | Array | [] | 图表数据配置项 | | stationList | Array | [] | 站点列表 | | hideKpi | Boolean | true | 是否隐藏统计指标 | | statKpis | Array | [] | 统计指标 | | option | Object | {} | 自定义图表配置项，覆盖默认配置 | | characterWlList | Array | [] | 特征水位列表，覆盖默认配置 | | rainDateList | Array | [] | 有雨日期数组 | | dateChangeCb | Function | () => {} | 日期选择器变化回调函数 | | stationChangeCb | Function | () => {} | 站点选择器变化回调函数 | | exportCb | Function | () => {} | 导出回调函数 |

效果展示

以下是组件不同效果展示：

收起

展开

License

MIT