hydro-graph 1.0.0

package/src/HydroGraph.vue

@@ -0,0 +1,2586 @@
+<template>
+  <!-- <el-card class="content-card" :style="{ background: backgroundColor }"> -->
+  <div class="box" ref="chartBox" @contextmenu="handleContextMenu($event)" v-resize="onResize">
+    <div class="title" v-show="chartOption.title" v-resize="onResize">{{ chartOption.title }}</div>
+    <div class="subTitle" v-show="chartOption.subTitle" v-resize="onResize">{{ chartOption.subTitle }}</div>
+    <!-- 图例 -->
+    <div class="legend-box" ref="myLegend" v-resize="onResize">
+      <el-checkbox v-model="isSelectedAll" label="全选" @change="onAllChange" :style="{ '--fill-color': '#409EFF' }"
+        v-if="legendArr.length > 1 ? true : false" />
+      <template v-for="(item, index) in legendArr" :key="index">
+        <el-checkbox v-model="item.isSelected" @change="(checked) => onChange(checked, item.name)"
+          :style="{ '--fill-color': item.color ? item.color : '#409EFF' }" v-if="!item.children">
+          <svg-icon :icon-class="item.icon" :style="{
+            width: item.iconWidth ? item.iconWidth + 'px' : '20px',
+            height: item.iconHeight ? item.iconHeight + 'px' : '20px',
+          }" :color="item.color" v-if="item.icon" />
+          <span :style="{ color: item.color, marginLeft: '3px' }">{{
+            item.key ? item.key : item.name
+          }}</span>
+          <el-icon class="el-icon--right" v-if="item.children && item.children.length > 0">
+            <ArrowDown />
+          </el-icon>
+        </el-checkbox>
+        <el-dropdown :hide-on-click="false" v-if="item.children && item.children.length > 0">
+          <el-checkbox v-model="item.isSelected" @change="(checked) => onChange(checked, item.name)"
+            :style="{ '--fill-color': item.color ? item.color : '#409EFF' }">
+            <svg-icon :icon-class="item.icon" :style="{
+              width: item.iconWidth ? item.iconWidth + 'px' : '20px',
+              height: item.iconHeight ? item.iconHeight + 'px' : '20px',
+            }" :color="item.color" v-if="item.icon" />
+            <span :style="{ color: item.color, marginLeft: '3px' }">
+              {{ item.key ? item.key : item.name }}
+            </span>
+            <el-icon class="el-icon--right" v-if="item.children && item.children.length > 0">
+              <ArrowDown />
+            </el-icon>
+          </el-checkbox>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="(it, inx) in item.children" :key="inx">
+                <el-checkbox v-model="it.isSelected" @change="(checked) => onChange(checked, it.name)"
+                  :style="{ '--fill-color': it.color ? it.color : '#409EFF' }">
+                  <div style="width: 20px; display: flex; justify-content: center">
+                    <svg-icon :icon-class="it.icon" :style="{
+                      width: it.iconWidth ? it.iconWidth + 'px' : '20px',
+                      height: it.iconHeight ? it.iconHeight + 'px' : '20px',
+                    }" :color="it.color" v-if="it.icon" />
+                  </div>
+                  <span :style="{ color: it.color, marginLeft: '3px' }">{{ it.key ? it.key : it.name }}</span>
+                </el-checkbox>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </template>
+    </div>
+    <!-- 图表 -->
+    <div class="mychart">
+      <div :id="id" :style="{ width: width, height: height }"></div>
+    </div>
+  </div>
+  <!-- </el-card> -->
+</template>
+
+<script setup name="HydroGraph">
+// 按需引入 echarts
+import * as echarts from 'echarts/core';
+import { LineChart, BarChart } from 'echarts/charts';
+import {
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent
+} from 'echarts/components';
+import { LabelLayout } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必要的组件
+echarts.use([
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+  LineChart,
+  BarChart,
+  LabelLayout,
+  CanvasRenderer
+]);
+import {
+  getTimeRange,
+  formatToFlowValue,
+  getInterval,
+  getMultipleTimeRange,
+  isTimeFormat,
+  getColors,
+  generateGUID
+} from "./utils/ruoyi";
+import { GetCotwlTransformation } from "./api/index";
+import dayjs from "dayjs";
+import { nextTick, onMounted, ref, watch } from "vue";
+import html2canvas from "html2canvas";
+import { ElMessage } from "element-plus";
+import { ArrowDown } from "@element-plus/icons-vue";
+import restorePng from "./assets/images/restore.png";
+import copyPng from "./assets/images/copy.png";
+import exportPng from "./assets/images/exportPng.png";
+const chartBox = ref();
+const props = defineProps({
+  id: {
+    type: String,
+    default() {
+      return generateGUID();
+    },
+  },
+  chartOption: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  legendList: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
+  width: {
+    type: String,
+    default() {
+      return "100%";
+    },
+  },
+  height: {
+    type: String,
+    default() {
+      return "100%";
+    },
+  },
+  backgroundColor: {
+    type: String,
+    default() {
+      return "#fff";
+    },
+  },
+});
+
+if (!props.chartOption.series) {
+  props.chartOption.series = [];
+}
+let legendAllColor = {};
+const emit = defineEmits();
+let dataZoom = {};
+watch(
+  () => props.chartOption,
+  () => {
+    nextTick(() => {
+      let time = setInterval(() => {
+        if (
+          document.getElementById(props.id) &&
+          document.getElementById(props.id).offsetHeight > 100 &&
+          document.getElementById(props.id).offsetWidth > 100
+        ) {
+          if (
+            myChart &&
+            myChart.getOption() &&
+            !props.chartOption.restoreZoom
+          ) {
+            dataZoom = {
+              ...myChart.getOption().dataZoom[0],
+              moveOnMouseMove: props.chartOption.series.some(
+                (item) => item.openBarDrag && (item.type == "line" || item.type == "markLine")
+              )
+                ? "ctrl"
+                : true,
+            };
+          }
+          setChart();
+          clearInterval(time);
+        }
+      }, 100);
+    });
+  },
+  { deep: true, immediate: true }
+);
+let lastSelected = {} //每次图例改变，把图例的选中状态存起来
+watch(
+  () => props.legendList,
+  () => {
+    if (myChart) {
+      lastSelected = myChart.getOption().legend[0].selected
+    }
+    let arr = props.legendList.map((item) => {
+      let obj = legendKeys.find((it) => it.code == item.name);
+      if (obj) {
+        return {
+          ...item,
+          ...obj,
+        };
+      } else {
+        return {
+          ...item,
+        };
+      }
+    });
+    let arr2 = JSON.parse(JSON.stringify(legendArr.value));
+    legendAllColor = {};
+    legendArr.value = arr.map((item) => {
+      const obj2 = arr2.find((it) => it.name == item.name);
+      legendAllColor[item.name] = item;
+      if (item.children) {
+        item.children = item.children.map((it) => {
+          legendAllColor[it.name] = it;
+          let isSelected2 = '';
+          if (props.chartOption.isDefaultElement === false) {
+            isSelected2 = lastSelected[it.name] != undefined ? lastSelected[it.name] : it.isSelected
+          } else {
+            if (obj2 && obj2.children && obj2.children.find((i) => i.name == it.name)) {
+              isSelected2 = obj2.children.find((i) => i.name == it.name).isSelected;
+            } else {
+              isSelected2 = it.isSelected
+            }
+          }
+          return {
+            ...it,
+            isSelected: isSelected2,
+            id: Math.random(),
+          };
+        });
+      }
+      let isSelected1 = '';
+      if (props.chartOption.isDefaultElement === false) {
+        isSelected1 = lastSelected[item.name] != undefined ? lastSelected[item.name] : item.isSelected
+      } else {
+        if (item.compel) {
+          isSelected1 = item.isSelected
+        } else if (obj2) {
+          isSelected1 = obj2.isSelected
+        } else {
+          isSelected1 = item.isSelected
+        }
+      }
+      return {
+        ...item,
+        isSelected: isSelected1,
+        id: Math.random(),
+      };
+    });
+  },
+  { deep: true }
+);
+//实测水位，库容，雨量图例属性配置
+const keys = [
+  { name: "实况雨量", type: "bar", color: "#0000ff", unit: "mm" },
+  { name: "实测水位", type: "line", color: "#304755", unit: "m" },
+  { name: "库容", type: "line", color: "#197e2b", unit: "万m³" },
+  { name: "5分钟水位", type: "line", color: "#304755", unit: "m" },
+  { name: "5分钟库容", type: "line", color: "#197e2b", unit: "万m³" },
+  { name: "校核洪水位", type: "markLine", color: "#ffa500", unit: "m" },
+  { name: "设计洪水位", type: "markLine", color: "#a52a2a", unit: "m" },
+  { name: "正常高水位", type: "markLine", color: "#008000", unit: "m" },
+  { name: "死水位", type: "markLine", color: "#000000", unit: "m" },
+  { name: "坝顶高程", type: "markLine", color: "#cf0ce1", unit: "m" },
+  { name: "梅汛期", code: "MXQ", type: "markLine", color: "#ff0000", unit: "m" },
+  { name: "台汛期", code: "TXQ", type: "markLine", color: "#ff0000", unit: "m" },
+  { name: "累计降雨", type: "line", color: "red", unit: "mm" },
+  { name: "可纳雨量", type: "bar", color: "#0000ff", unit: "mm" },
+  { name: "作业预报时间", type: "markLine", color: "#ff0000" },
+];
+
+//实测水位，库容，雨量图例属性配置
+const legendKeys = [
+  { name: "实况雨量", code: "P", color: "#0000ff", icon: "histogram" },
+  { name: "实测水位", code: "RZ", color: "#304755", icon: "straightLine", iconWidth: "30", iconHeight: "30" },
+  { name: "库容", code: "W", color: "#197e2b", icon: "straightLine", iconWidth: "30", iconHeight: "30" },
+];
+
+const floodControl = ["校核洪水位", "设计洪水位", "正常高水位", "坝顶高程", "死水位", "主汛期"];
+//将传进来的图例数据与legendKeys匹配合并
+const legendArr = ref(
+  props.legendList.map((item, index) => {
+    let obj = legendKeys.find((it) => it.code == item.name);
+    if (!item.color) {
+      item.color = getColors[index];
+    }
+    if (obj) {
+      return {
+        ...item,
+        ...obj,
+      };
+    } else {
+      return {
+        ...item,
+      };
+    }
+  })
+);
+legendArr.value.forEach((item) => {
+  legendAllColor[item.name] = item;
+  if (item.children) {
+    item.children.forEach((it) => {
+      legendAllColor[it.name] = it;
+    });
+  }
+});
+//是否全选
+const isSelectedAll = ref(true);
+let unselectedName = null;
+//图例全选切换
+const onAllChange = (e) => {
+  let names = [];
+  isSelectedAll.value = e;
+  legendArr.value.forEach((item) => {
+    item.isSelected = e;
+    names.push(item.name);
+    if (item.children) {
+      item.children.forEach((it) => {
+        it.isSelected = e;
+        names.push(it.name);
+      });
+    }
+  });
+  names.forEach((item) => {
+    selected[item] = e;
+    legendSelect(item, e);
+  });
+  dataZoom = { ...myChart.getOption()?.dataZoom[0] };
+  setChart();
+};
+//图例单个选中切换
+const onChange = (e, name) => {
+  let names = [];
+  legendArr.value.forEach((item) => {
+    if (item.name == name) {
+      item.isSelected = e;
+      if (item.children) {
+        item.children.forEach((it) => {
+          it.isSelected = e;
+          names.push(it.name);
+        });
+      } else {
+        names.push(item.name);
+      }
+    } else {
+      item.children &&
+        item.children.forEach((it) => {
+          if (it.name == name) {
+            it.isSelected = e;
+            names.push(it.name);
+            if (
+              item.children.filter((i) => i.isSelected).length ==
+              item.children.length
+            ) {
+              item.isSelected = true;
+            } else {
+              item.isSelected = false;
+            }
+          }
+        });
+    }
+  });
+  names.forEach((item) => {
+    if (Array.isArray(item)) {
+      selected[item[0]] = e;
+      selected[item[1]] = e;
+      legendSelect(item[0], e);
+      legendSelect(item[1], e);
+    } else {
+      selected[item] = e;
+      legendSelect(item, e);
+    }
+  });
+  unselectedName = legendArr.value.some((item) => item.isSelected == false);
+  if (unselectedName) {
+    isSelectedAll.value = false;
+  } else {
+    isSelectedAll.value = true;
+  }
+  dataZoom = { ...myChart.getOption()?.dataZoom[0] };
+  setChart();
+};
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeyDown);
+});
+let markPointList = {};
+const handleKeyDown = (event) => {
+  if (event.key === "i") {
+    let newOption = JSON.parse(JSON.stringify(myChart.getOption()));
+    newOption.series.forEach((item) => {
+      if (item.markPoint && item.markPoint.data.length != 0) {
+        item.markPoint.data = [];
+      } else if (item.markPoint && item.markPoint.data == 0) {
+        item.markPoint = markPointList[item.name];
+      }
+    });
+    myChart.setOption(newOption);
+  }
+};
+//初始化图表中每条线的显示隐藏需要的数据
+let selected = {};
+let myChart, chartDom;
+const option = ref({});
+const setChart = async () => {
+  //将传进来的series数据与keys匹配合并
+  let newSeries = props.chartOption.series.map((item) => {
+    let obj = "";
+    if (item.code) {
+      obj = keys.find((it) => it.code == item.code);
+    } else {
+      obj = keys.find((it) => it.name == item.name);
+    }
+    if (obj) {
+      return {
+        ...obj,
+        ...item,
+      };
+    } else {
+      return {
+        ...item,
+      };
+    }
+  });
+  //将图例中每个对象中的name与isSelected转为echarts识别的对象来初始化图表中每条线的显示隐藏
+  legendArr.value.forEach((item) => {
+    selected[item.name] = item.isSelected;
+    if (item.children) {
+      item.children.forEach((it) => {
+        selected[it.name] = it.isSelected;
+      });
+    }
+  });
+  chartDom = document.getElementById(props.id);
+  if (!myChart) {
+    myChart = echarts.init(chartDom);
+  }
+  //过滤series中不是数组的对象
+  let seriesDatas = newSeries.filter((item) => Array.isArray(item.data));
+  //判断数据是不是都是空的
+  const isAllEmptyArray = seriesDatas.every(
+    (item) => Array.isArray(item.data) && item.data.length === 0
+  );
+  //获取查询时间段的所有时间
+  const seriesEmptyArray = getTimeRange(
+    new Date(dayjs().subtract(5, "day").format("YYYY-MM-DD 08:00")),
+    new Date(dayjs().format("YYYY-MM-DD HH:00")),
+    60
+  ).map((item) => [item, ""]);
+  //将数据中的时间放进一个数组进行排序
+  let timeArr = [];
+  seriesDatas.forEach((item) => {
+    timeArr = timeArr.concat(item.data);
+  });
+
+  timeArr = [...new Set(timeArr.map((item) => item[0]))];
+  timeArr.sort((a, b) => Date.parse(a) - Date.parse(b));
+  if (timeArr.some((item) => isTimeFormat(item))) {
+    timeArr = timeArr.filter((item) => isTimeFormat(item));
+  }
+  let sectionStartTime = timeArr[0]
+  props.chartOption.series.forEach(item => {
+    if (item.name == "开始" && item.sectionStartTime) {
+      sectionStartTime = item.sectionStartTime
+    }
+  })
+  let newGrid = JSON.parse(JSON.stringify(props.chartOption.grid));
+  let newXAxis = props.chartOption.xAxis.map((item, index) => {
+    let axisLabelShow = ''
+    if (item.show == false) {
+      axisLabelShow = false
+    } else if (newGrid.length > 1 && index == 0) {
+      axisLabelShow = false
+    } else {
+      axisLabelShow = true
+    }
+    let obj = {
+      type: item.type,
+      logBase: item.logBase || 10,
+      gridIndex: item.gridIndex,
+      name: axisLabelShow && item.type == 'time' ? '时间' : item.name,
+      nameLocation: axisLabelShow && item.type == 'time' ? 'end' : "middle", // x轴name处于x轴的什么位置
+      nameTextStyle: {
+        //x轴上方单位的颜色
+        color: "#333",
+        verticalAlign: axisLabelShow && item.type == 'time' ? 'top' : ''
+      },
+      position: item.position,
+      offset: item.offset ? item.offset : 0,
+      inverse: item.inverse ? item.inverse : false,
+      nameGap: axisLabelShow && item.type == 'time' ? 45 : item.nameGap ? item.nameGap : item.name ? 25 : 0, // x轴name与横纵坐标轴线的间距
+      axisLabel: {
+        show: axisLabelShow,
+        rotate: item.rotate,
+        formatter: function (value) {
+          if (item.type == "time") {
+            if (
+              isAnnualFirstDay(dayjs(dayjs(value).format("YYYY-MM-DD HH:mm")))
+            ) {
+              return props.chartOption.xTimeType
+                ? `{a|${props.chartOption.xTimeType}}`
+                : "{a|{yyyy}-{MM}-{dd} {HH}:{mm}}";
+            } else {
+              return props.chartOption.xTimeType
+                ? props.chartOption.xTimeType
+                : "{MM}-{dd} {HH}:{mm}";
+            }
+          } else {
+            if (item.name) {
+              if (item.name.includes("m³/s")) {
+                return formatToFlowValue(value);
+              } else if (item.name.includes("万m³")) {
+                return value.toFixed(2);
+              } else if (item.name.includes("mm")) {
+                return value.toFixed(1);
+              } else if (item.name.includes("m")) {
+                return value.toFixed(2);
+              } else {
+                return (value || value == 0) && item.toFixed ? Number(value).toFixed(item.toFixed) : value;
+              }
+            } else {
+              return value;
+            }
+          }
+        },
+        rich: {
+          a: {
+            fontWeight: "bold",
+          },
+        },
+        color: props.chartOption.yAxisColor
+          ? props.chartOption.yAxisColor
+          : "#333",
+        hideOverlap: true,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: props.chartOption.yAxisColor
+            ? props.chartOption.yAxisColor
+            : "#8a949c",
+        },
+      },
+      splitLine: {
+        show: item.splitLineHide ? false : item.gridIndex != 2 ? true : false,
+        lineStyle: {
+          color: "#e0e6f1",
+        },
+      },
+      axisTick: {
+        show:
+          item.show == false
+            ? false
+            : newGrid.length > 1 && index == 0
+              ? false
+              : true, // 不显示坐标轴上的文字
+        alignWithLabel:
+          props.chartOption.alignWithLabel != undefined
+            ? props.chartOption.alignWithLabel
+            : true,
+      },
+      boundaryGap: item.boundaryGap ? item.boundaryGap : ["1%", "1%"],
+    };
+    if (item.data) {
+      obj.data = item.data;
+    }
+    if (item.type == "value" || item.type == "log") {
+
+      let min = 0;
+      let max = 100;
+      let interval = 10;
+
+      if (item.name.includes("m³/s")) {
+        max = 1000;
+        interval = 100;
+      } else if (item.name.includes("万m³")) {
+        max = 10000;
+        interval = 1000;
+      }
+      let filterNewData = props.chartOption.series.filter((it) => it.yAxisIndex == index);
+      //获取series中data为数组的并且合并在一起
+      let newData = [],
+        dataAll = [],
+        minValue = 0,
+        maxValue = 100;
+      filterNewData.forEach((it) => {
+        if (it.data instanceof Array) {
+          newData = newData.concat(it.data);
+        }
+      });
+      //获取所有的值
+      if (newData[0] instanceof Array) {
+        dataAll = newData
+          .filter(
+            (it) =>
+              it[0] != "" &&
+              it[0] != null &&
+              it[0] != undefined &&
+              !isNaN(it[0])
+          )
+          .map((it) => Number(it[0]));
+      }
+      if (dataAll.length > 0) {
+        minValue = Math.min(...dataAll);
+        maxValue = Math.max(...dataAll);
+        if (
+          filterNewData.some((it) => it.type == "bar") ||
+          item.name.includes("雨")
+        ) {
+          min = 0;
+          if (minValue !== 0 || maxValue !== 0) {
+            max =
+              Math.ceil(maxValue / getInterval(0, maxValue)) *
+              getInterval(0, maxValue);
+            interval = getInterval(0, maxValue);
+          }
+        } else {
+          if (item.min || item.min == 0) {
+            min = item.min;
+            if (minValue !== 0 || maxValue !== 0) {
+              max =
+                Math.ceil(maxValue / getInterval(item.min, maxValue)) *
+                getInterval(item.min, maxValue);
+              interval = getInterval(item.min, maxValue);
+            }
+          } else {
+            if (minValue !== 0 || maxValue !== 0) {
+              min =
+                Math.floor(minValue / getInterval(minValue, maxValue)) *
+                getInterval(minValue, maxValue);
+              max =
+                Math.ceil(maxValue / getInterval(minValue, maxValue)) *
+                getInterval(minValue, maxValue);
+              interval = getInterval(minValue, maxValue);
+            }
+          }
+        }
+      }
+
+      obj.min = item.min != "" && item.min != null ? item.min : min;
+      obj.max = item.max != "" && item.max != null ? item.max : max;
+      obj.interval = item.interval && item.max && (item.min || item.min == 0)
+        ? item.interval
+        : interval;
+      item.interval && item.max && (item.min || item.min == 0)
+        ? item.interval
+        : interval,
+        obj.minorTick = {
+          show: item.isMinorSplitLineShow ? true : false,
+        };
+    }
+    return obj;
+  });
+  let newYAxis = props.chartOption.yAxis.map((item, index) => {
+    let min = 0;
+    let max = 100;
+    let interval = 10;
+
+    if (item.name.includes("m³/s")) {
+      max = 1000;
+      interval = 100;
+    } else if (item.name.includes("万m³")) {
+      max = 10000;
+      interval = 1000;
+    }
+
+    if (item.name == "可纳雨量(mm)") {
+      return {
+        gridIndex: item.index,
+        name: item.name,
+        nameLocation: "middle", // y轴name处于y轴的什么位置
+        nameTextStyle: {
+          //y轴上方单位的颜色
+          color: "#333",
+        },
+        nameGap: item.nameGap, // y轴name与横纵坐标轴线的间距
+        type: "value",
+        position: item.position,
+        offset: item.offset,
+        min: item.min,
+        max: item.max,
+        interval: item.interval,
+        axisLabel: {
+          // 内容格式器
+          formatter: (value) => {
+            return value.toFixed(1);
+          },
+          color: "#333",
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#8a949c",
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        minorTick: {
+          show: true,
+        },
+        axisTick: {
+          show: true, // 是否显示坐标轴刻度
+        },
+      };
+    } else {
+      let filterNewData = props.chartOption.series.filter((it) => {
+        return (
+          it.yAxisIndex == index &&
+          (selected[it.name] || !Object.keys(selected).includes(it.name))
+        );
+      });
+      //获取series中data为数组的并且合并在一起
+      let newData = [],
+        dataAll = [],
+        jjData = [],
+        minValue = 0,
+        maxValue = 100,
+        firstYValue = null; // 保存第一个y轴值
+      filterNewData.forEach((it) => {
+        if (it.data instanceof Array) {
+          const seriesData = it.data2 ? it.data2 : it.data;
+          seriesData.forEach((item) => {
+            if (item instanceof Array && item.length >= 2) {
+              // 对于[[x1, y1], [x2, y2], ...]格式的数据
+              const yValue = item[1];
+              if (yValue != "" && yValue != null && yValue != undefined && !isNaN(yValue)) {
+                const numValue = Number(yValue);
+                // 保存第一个有效的y轴值
+                if (firstYValue === null) {
+                  firstYValue = numValue;
+                }
+              }
+            }
+          });
+          newData = it.data2 ? newData.concat(it.data2) : newData.concat(it.data);
+        } else {
+          if (it.data.name == "yAxis" && it.data.value) {
+            jjData.push(Number(it.data.value));
+          }
+        }
+      });
+      //获取所有的值
+      if (newData[0] instanceof Array) {
+        dataAll = newData
+          .filter(
+            (it) =>
+              it[1] != "" &&
+              it[1] != null &&
+              it[1] != undefined &&
+              !isNaN(it[1])
+          )
+          .map((it) => Number(it[1]));
+      } else if (newData[0] instanceof Object && newData[0].value) {
+        let newDataAll = newData.map((it) => it.value);
+        dataAll = newDataAll
+          .filter(
+            (it) => it != "" && it != null && it != undefined && !isNaN(it)
+          )
+          .map((it) => Number(it));
+      } else {
+        dataAll = newData
+          .filter(
+            (it) => it != "" && it != null && it != undefined && !isNaN(it)
+          )
+          .map((it) => Number(it));
+      }
+      if (dataAll.length > 0 || jjData.length > 0) {
+        minValue = Math.min(...dataAll, ...jjData);
+        maxValue = Math.max(...dataAll, ...jjData);
+        if (
+          filterNewData.some((it) => it.type == "bar") ||
+          item.name.includes("雨")
+        ) {
+          min = 0;
+          if (props.chartOption.xAxis.length > 1 && item.inverse) {
+            if (minValue !== 0 || maxValue !== 0) {
+              max =
+                Math.ceil(maxValue / getInterval(0, maxValue, 1)) *
+                getInterval(0, maxValue, 1) +
+                getInterval(0, maxValue, 1) *
+                (item.upIntervalNumber != undefined
+                  ? item.upIntervalNumber
+                  : 1);
+              interval = getInterval(0, maxValue, 1);
+            }
+          } else {
+            if (minValue !== 0 || maxValue !== 0) {
+              max =
+                Math.ceil(maxValue / getInterval(0, maxValue)) *
+                getInterval(0, maxValue) +
+                getInterval(0, maxValue) *
+                (item.upIntervalNumber != undefined
+                  ? item.upIntervalNumber
+                  : 1);
+              interval = getInterval(0, maxValue);
+            }
+          }
+        } else {
+          if (item.min || item.min == 0) {
+            min = item.min;
+            if (minValue !== 0 || maxValue !== 0) {
+              max =
+                Math.ceil(maxValue / getInterval(item.min, maxValue)) *
+                getInterval(item.min, maxValue) +
+                getInterval(item.min, maxValue) *
+                (item.upIntervalNumber != undefined
+                  ? item.upIntervalNumber
+                  : 1);
+              interval = getInterval(item.min, maxValue);
+            }
+          } else {
+            if (minValue !== 0 || maxValue !== 0) {
+              // 检查是否至少有一个x轴是value类型
+              const xAxisIsValue = props.chartOption.xAxis.some(xAxis => xAxis.type === 'value');
+              if (xAxisIsValue && firstYValue !== null) {
+                // 当x轴是value类型时，使用第一个y轴值作为最小刻度值
+                min = firstYValue;
+                // 计算合适的间隔
+                const intervalValue = getInterval(min, maxValue);
+                // 计算最大值，确保包含所有数据
+                max =
+                  Math.ceil((maxValue - min) / intervalValue) * intervalValue + min +
+                  intervalValue *
+                  (item.upIntervalNumber != undefined
+                    ? item.upIntervalNumber
+                    : 1);
+                interval = intervalValue;
+              } else {
+                // 其他情况，使用原来的逻辑
+                min =
+                  Math.floor(minValue / getInterval(minValue, maxValue)) *
+                  getInterval(minValue, maxValue) -
+                  getInterval(minValue, maxValue) *
+                  (item.downIntervalNumber != undefined
+                    ? item.downIntervalNumber
+                    : 1);
+                max =
+                  Math.ceil(maxValue / getInterval(minValue, maxValue)) *
+                  getInterval(minValue, maxValue) +
+                  getInterval(minValue, maxValue) *
+                  (item.upIntervalNumber != undefined
+                    ? item.upIntervalNumber
+                    : 1);
+                interval = getInterval(minValue, maxValue);
+              }
+            }
+          }
+        }
+      }
+      if (item.rangeType == 1) {
+        let yMax = "",
+          val = "";
+        if (Math.abs(maxValue) > Math.abs(minValue)) {
+          val = Math.abs(maxValue);
+        } else {
+          val = Math.abs(minValue);
+        }
+        yMax = Math.ceil(val / getInterval(0, val)) * getInterval(0, val);
+        max = yMax;
+        min = 0 - yMax;
+        interval = getInterval(0, Math.abs(yMax));
+      }
+      return {
+        gridIndex: item.index,
+        name: item.name,
+        nameLocation: "middle", // y轴name处于y轴的什么位置
+        nameTextStyle: {
+          //y轴上方单位的颜色
+          color: props.chartOption.yAxisColor
+            ? props.chartOption.yAxisColor
+            : "#333",
+        },
+        nameGap: item.nameGap, // y轴name与横纵坐标轴线的间距
+        type: item.type || "value",
+        logBase: item.logBase || 10,
+        position: item.position,
+        offset: item.offset ? item.offset : 0,
+        inverse: item.inverse ? item.inverse : false,
+        min: item.min != "" && item.min != null ? item.min : min,
+        max: item.max != "" && item.max != null ? item.max : max,
+        interval:
+          item.interval && item.max && (item.min || item.min == 0)
+            ? item.interval
+            : interval,
+        axisLabel: {
+          // 内容格式器
+          formatter: (value) => {
+            if (item.name.includes("m³/s")) {
+              return formatToFlowValue(value);
+            } else if (item.name.includes("万m³")) {
+              return value.toFixed(2);
+            } else if (item.name.includes("mm")) {
+              return value.toFixed(1);
+            } else if (item.name.includes("m")) {
+              return value.toFixed(2);
+            } else {
+              return value;
+            }
+          },
+          color: props.chartOption.yAxisColor
+            ? props.chartOption.yAxisColor
+            : "#333",
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: props.chartOption.yAxisColor
+              ? props.chartOption.yAxisColor
+              : "#8a949c",
+          },
+        },
+        axisTick: {
+          show: true, // 是否显示坐标轴刻度
+        },
+        splitLine: {
+          show:
+            (newGrid.length > 1 &&
+              item.index == 1 &&
+              item.position == "right") ||
+              (newGrid.length == 1 &&
+                item.index == 0 &&
+                item.position == "right") ||
+              item.splitLineHide
+              ? false
+              : true,
+          lineStyle: {
+            color: "#e0e6f1",
+          },
+        },
+        minorTick: {
+          show: true,
+        },
+        minorSplitLine: {
+          show:
+            (newGrid.length > 1 &&
+              item.index == 1 &&
+              item.position == "right") ||
+              (newGrid.length == 1 &&
+                item.index == 0 &&
+                item.position == "right") ||
+              item.splitLineHide ?
+              false : item.minorSplitLineHide
+                ? false
+                : true,
+          lineStyle: {
+            color: "#f4f7fd",
+          },
+        },
+        axisTick: {
+          show: true, // 是否显示坐标轴刻度
+        },
+      };
+    }
+  });
+  let openBarDrag = newSeries.some(item => item.openBarDrag) //图表是否打开了编辑模式
+  let seriesArr = newSeries.map((item, index) => {
+    let obj = {};
+    if (item.type == "bar") {
+      if (item.name == "可纳雨量") {
+        obj = {
+          name: item.name,
+          type: item.type,
+          xAxisIndex: item.xAxisIndex,
+          yAxisIndex: item.yAxisIndex,
+          barWidth: item.barWidth,
+          data: isAllEmptyArray ? seriesEmptyArray : item.data,
+          label: {
+            show: true, // 显示标签
+            position: "top", // 标签显示在柱子的顶部
+            color: "black", // 标签文字颜色
+            fontFamily: "Times New Roman",
+          },
+          itemStyle: {
+            color: function (params) {
+              // 根据条件设置柱子颜色
+              if (item.barColor == "1") {
+                if (params.dataIndex === 0) {
+                  return "#ff0000";
+                } else if (params.dataIndex === 1) {
+                  return "#a52a2a";
+                } else if (params.dataIndex === 2) {
+                  return "#ffa500";
+                } else if (params.dataIndex === 3) {
+                  return "#cf0ce1";
+                }
+              } else {
+                return "#00a651";
+              }
+            },
+          },
+          zlevel: 9,
+          z: 9,
+        };
+      } else {
+        obj = {
+          name: item.name,
+          type: item.type,
+          xAxisIndex: item.xAxisIndex,
+          yAxisIndex: item.yAxisIndex,
+          label: {
+            show: item.isLabelShow ? item.isLabelShow : false,
+            position: "top",
+            fontFamily: "Times New Roman",
+            formatter: function (data) {
+              let val = Array.isArray(data.value) ? data.value[1] : data.value
+              return "{a0|" + val + "}";
+            },
+            rich: {
+              a0: {
+                color: legendAllColor[item.name]
+                  ? legendAllColor[item.name].color
+                  : item.color,
+                fontSize: 12,
+              },
+            },
+          },
+          stack: item.stack ? item.stack : "",
+          tooltip: {
+            show: item.isTooltipShow == false ? false : true,
+            trigger: "axis",
+            type: "none",
+          },
+          itemStyle: item.itemStyle
+            ? item.itemStyle
+            : {
+              color: function (params) {
+                let color = legendAllColor[item.name]
+                  ? legendAllColor[item.name].color
+                  : item.color
+                    ? item.color
+                    : getColors[index];
+                if (item.color2) {
+                  if (params.value[1] < 0) {
+                    return item.color2;
+                  } else {
+                    return color;
+                  }
+                } else {
+                  return color;
+                }
+              },
+              decal: {
+                symbol: item.pattern ? item.pattern : 'none'
+              }
+            },
+          barCategoryGap: item.barCategoryGap ? item.barCategoryGap : newYAxis[item.yAxisIndex].inverse ? "0%" : "20%",
+          barGap: item.barGap ? item.barGap : "0%",
+          data: isAllEmptyArray ? seriesEmptyArray : item.data,
+          zlevel: 9,
+          z: 9,
+        };
+      }
+      if (item.barWidth) {
+        obj.barWidth = item.barWidth;
+        if (item.barGap) {
+          obj.barGap = item.barGap;
+        } else {
+          obj.barGap = "20%";
+        }
+      }
+      if (item.barMaxWidth) {
+        obj.barMaxWidth = item.barMaxWidth;
+        if (item.barGap) {
+          obj.barGap = item.barGap;
+        } else {
+          obj.barGap = "20%";
+        }
+      }
+    } else if (item.type == "line") {
+      let areaColor = "rgba(0, 0, 0, 0)";
+      if (props.chartOption.isFace) {
+        if (props.chartOption.faceNames) {
+          if (props.chartOption.faceNames.includes(item.name)) {
+            if (legendAllColor[item.name]) {
+              areaColor = legendAllColor[item.name].color;
+            } else {
+              areaColor = item.color;
+            }
+          }
+        } else {
+          if (legendAllColor[item.name]) {
+            areaColor = legendAllColor[item.name].color;
+          } else {
+            areaColor = item.color;
+          }
+        }
+      }
+      let symbolSize = '', triggerLineEvent = false;
+      if (item.showSymbol || legendAllColor[item.name]?.icon == "dottedLine") {
+        if (item.symbolSize) {
+          symbolSize = item.symbolSize
+        } else {
+          symbolSize = 5
+        }
+      } else {
+        if (props.chartOption.isTooltipItem) {
+          symbolSize = 10
+          triggerLineEvent = true
+        } else {
+          symbolSize = 0
+        }
+      }
+      obj = {
+        name: item.name,
+        type: item.type,
+        xAxisIndex: item.xAxisIndex,
+        yAxisIndex: item.yAxisIndex,
+        itemStyle: {
+          color: legendAllColor[item.name]
+            ? legendAllColor[item.name].color
+            : item.color,
+          opacity: item.showSymbol || legendAllColor[item.name]?.icon == "dottedLine" ? 1 : 0
+        },
+        lineStyle: item.lineStyle
+          ? item.lineStyle
+          : {
+            type:
+              legendAllColor[item.name]?.icon == "dotted"
+                ? "dotted"
+                : "solid",
+          },
+        areaStyle: {
+          color: areaColor,
+          opacity: 0.5,
+        },
+        smooth: item.smooth != undefined ? item.smooth : false,
+        showSymbol: true,
+        symbol: item.symbol ? item.symbol : "circle",
+        connectNulls: true,
+        symbolSize: symbolSize,
+        data: isAllEmptyArray ? seriesEmptyArray : item.data,
+        silent: openBarDrag ? item.openBarDrag === true ? false : true : false,
+        triggerLineEvent: triggerLineEvent,
+        zlevel: 9,
+        z: 9,
+      };
+      if (item.isMaxMinShow && item.data.length > 0) {
+        let newArr = item.data.filter(item => !item[2]).filter((it) => it[1]);
+        let maxElement = newArr.reduce((max, current) => {
+          return parseFloat(current[1]) > parseFloat(max[1]) ? current : max;
+        }, newArr[0]);
+
+        let maxTime = maxElement ? maxElement[0] : '', maxValue = maxElement ? maxElement[1] : '',
+          offset;
+        timeArr.forEach((item, index) => {
+          if (dayjs(item).isValid() && item == maxTime) {
+            if (!item.markPointOffset) {
+              if (index >= (timeArr.length / 5) * 4) {
+                offset = [-200, 0];
+              } else if (index >= (timeArr.length / 5) * 3) {
+                offset = [-150, 0];
+              } else if (index >= (timeArr.length / 5) * 2) {
+                offset = [-100, 0];
+              } else if (index >= (timeArr.length / 5) * 1) {
+                offset = [-50, 0];
+              } else if (index >= 0) {
+                offset = [0, 0];
+              }
+            }
+          }
+        });
+        obj.markPoint = {
+          symbol: "pin",
+          symbolSize: 20,
+          label: {
+            show: item.isMarkPointLabelShow === false ? false : true,
+            position: "top",
+            align: "left",
+            fontSize: 16,
+            backgroundColor: item.backgroundColor
+              ? item.backgroundColor
+              : legendAllColor[item.name]
+                ? legendAllColor[item.name].color
+                : item.color,
+            borderRadius: 6,
+            shadowColor: "#666666",
+            shadowBlur: 5,
+            shadowOffsetX: 3,
+            shadowOffsetY: 3,
+            fontWeight: "bold",
+            padding: [4, 4, 4, 4],
+            lineHeight: 30,
+            color: item.markPointColor ? item.markPointColor : "#fff",
+            formatter: (par) => {
+              let maxTime = "";
+              if (par.data && par.data.coord && par.data.coord[0]) {
+                let tmType = item.tmType ? item.tmType : "YYYY-MM-DD HH:mm";
+                maxTime = dayjs(par.data.coord[0]).format(tmType);
+              }
+              let text = "";
+              let value = "";
+              if (par.name == "Max") {
+                text = item.maxText ? item.maxText : "最大值";
+                if (item.unit.includes("m³")) {
+                  value = par.value ? formatToFlowValue(par.value) : "--";
+                } else if (item.unit.includes("mm")) {
+                  value = par.value ? Number(par.value).toFixed(1) : "--";
+                } else if (item.unit.includes("m")) {
+                  value = par.value ? Number(par.value).toFixed(2) : "--";
+                } else {
+                  value = par.value;
+                }
+                if (item.tmText) {
+                  return `${text}: {a0|${value}} ${item.unit}\n${item.tmText}: {a1|${maxTime}}`;
+                } else {
+                  return `${item.tmText2 ? item.tmText2 : "相应时间"
+                    }: {a1|${maxTime}}\n${text}: {a0|${value}} ${item.unit}`;
+                }
+              }
+            },
+            rich: {
+              a0: {
+                fontSize: 25,
+                fontFamily: "Times New Roman",
+              },
+              a1: {
+                fontSize: 20,
+                fontFamily: "Times New Roman",
+              },
+            },
+          },
+          data: [
+            {
+              name: "Max",
+              label: {
+                offset: item.markPointOffset
+                  ? item.markPointOffset
+                  : offset
+                    ? offset
+                    : [-120, 0],
+              },
+              xAxis: maxTime,
+              yAxis: maxValue,
+              value: maxValue
+            },
+          ],
+        };
+      }
+    } else if (item.type == "markLine") {
+      let markLineLabel = {}, padding = [];
+      if (item.labelType == 2) {
+        if (item.name == '开始') {
+          padding = [0, 0, -80, 180]
+        } else if (item.name == '结束') {
+          padding = [0, 180, -120, 0]
+        }
+        markLineLabel = {
+          show: item.labelHide ? false : true,
+          position: "end",
+          fontWeight: "bold",
+          padding: padding,
+          fontFamily: "Times New Roman",
+          lineHeight: 20,
+          fontSize: 15,
+        };
+      } else {
+        markLineLabel = {
+          show: item.labelHide ? false : true,
+          position: "insideStartTop",
+          fontFamily: "Times New Roman",
+          lineHeight: 20,
+          fontSize: 15,
+        };
+      }
+      obj = {
+        name: item.name,
+        type: "line",
+        xAxisIndex: item.xAxisIndex,
+        yAxisIndex: item.yAxisIndex,
+        markLine: {
+          symbol: "none",
+          label: markLineLabel,
+          data: [
+            {
+              lineStyle: {
+                type: item.markLineStyle ? item.markLineStyle : item.name == '开始' || item.name == '结束' ? 'dashed' : [5, 2],
+                dashOffset: 0,
+                color: legendAllColor[item.name]
+                  ? legendAllColor[item.name].color
+                  : item.color,
+                width: item.name == '开始' || item.name == '结束' ? 5 : 1,
+              },
+              [item.data.name]: String(item.data.value),
+              label: {
+                color: legendAllColor[item.name]
+                  ? legendAllColor[item.name].color
+                  : item.color,
+                fontFamily: "Times New Roman, serif",
+                distance: -2,
+                position: item.position ? item.position : "insideStartTop",
+                formatter: function (params) {
+                  if (item.labelType == 2) {
+                    let text = '';
+                    if (item.name == '开始') {
+                      text = `${item.name}: ${params.value}`
+                    } else if (item.name == '结束') {
+                      text = `${item.name}: ${formatSecondTime(params.value)}`
+                    }
+                    if (item.labelArr) {
+                      item.labelArr.forEach((it) => {
+                        text += `{a1|\n${it.name}: ${it.value} ${it.unit}}`;
+                      });
+                    }
+                    return text;
+                  } else {
+                    let icon = "";
+                    if (floodControl.includes(item.name) || item.name.includes("梅汛期") || item.name.includes("台汛期")) {
+                      icon = "{a0|▽}";
+                    }
+                    return item.data.name == "xAxis"
+                      ? item.name
+                      : `   ${icon}${item.name}: ${item.data.value} ${item.unit}    `;
+                  }
+                },
+                rich: {
+                  a0: {
+                    fontSize: 15,
+                  },
+                  a1: {
+                    color: 'red',
+                    fontSize: 16,
+                    fontFamily: '黑体'
+                  },
+                },
+              },
+              emphasis: {
+                lineStyle: {
+                  width: item.name == '开始' || item.name == '结束' ? 6 : 3,
+                }
+              }
+            },
+          ],
+        }
+      };
+    } else if (item.type == "scatter") {
+      obj = {
+        name: item.name,
+        type: item.type,
+        xAxisIndex: item.xAxisIndex,
+        yAxisIndex: item.yAxisIndex,
+        symbolSize: item.symbolSize,
+        itemStyle: {
+          color: legendAllColor[item.name]
+            ? legendAllColor[item.name].color
+            : item.color,
+        },
+        data: isAllEmptyArray ? seriesEmptyArray : item.data,
+        zlevel: 9,
+        z: 9,
+      };
+    } else if (item.type == "boxplot") {
+      obj = {
+        name: item.name,
+        type: item.type,
+        xAxisIndex: item.xAxisIndex,
+        yAxisIndex: item.yAxisIndex,
+        itemStyle: {
+          color: legendAllColor[item.name]
+            ? legendAllColor[item.name].color
+            : item.color,
+          borderWidth: 2,
+          borderColor: "black",
+        },
+        boxWidth: item.boxWidth ? item.boxWidth : 30, // 设置箱子宽度
+        emphasis: {
+          // 鼠标移入时的样式
+          itemStyle: {
+            borderWidth: 2,
+          },
+        },
+        data: isAllEmptyArray ? seriesEmptyArray : item.data,
+        zlevel: 9,
+        z: 9,
+      };
+    }
+    if (item.markArea) {
+      if (item.markArea.data) {
+        obj.markArea = {
+          silent: item.markArea.silent ? item.markArea.silent : false,
+          label: item.markArea.label ? item.markArea.label : {},
+          itemStyle: item.markArea.itemStyle ? item.markArea.itemStyle : {},
+          data: item.markArea.data,
+        };
+      } else {
+        obj.markArea = {
+          silent: true,
+          itemStyle: {
+            opacity: item.markArea.opacity ? item.markArea.opacity : 0.3,
+            color: item.markArea.color ? item.markArea.color : "#BEE6E6",
+            borderColor: item.markArea.borderColor
+              ? item.markArea.borderColor
+              : "red",
+            borderWidth: item.markArea.borderWidth
+              ? item.markArea.borderWidth
+              : 2,
+          },
+          data: [
+            [
+              {
+                xAxis: item.markArea.start,
+              },
+              {
+                xAxis: item.markArea.end,
+              },
+            ],
+          ],
+        };
+      }
+    }
+    return obj;
+  });
+
+  let yNames = newYAxis.map((item) => item.name),
+    krData = {},
+    krData2 = {};
+  if (
+    yNames.includes("水位(m)") &&
+    yNames.includes("库容(万m³)") &&
+    props.chartOption.stationCode
+  ) {
+    let obj = newYAxis.find((it) => it.name == "水位(m)");
+    let nums = [];
+    for (let i = obj.min; i <= obj.max; i += obj.interval) {
+      nums.push(i);
+    }
+    let krArr = [];
+    for (let i = 0; i < nums.length; i++) {
+      if (obj.max == 100) {
+        krArr.push(i * 1000);
+      } else {
+        if (nums[i] == 0) {
+          krArr.push(0);
+        } else {
+          let val = await cotwlTransformation(nums[i], i);
+          krArr.push(val);
+        }
+      }
+    }
+    newYAxis.forEach((item) => {
+      if (item.name == "水位(m)") {
+        item.offset = 80;
+      } else if (item.name == "库容(万m³)") {
+        item.offset = 80;
+        item.nameGap = -70;
+        item.splitLine.show = false;
+        item.minorSplitLine.show = false;
+        item.axisLabel.inside = true;
+        item.axisTick.inside = true;
+        if (newGrid.length > 1) {
+          if (item.gridIndex == 0) {
+            newGrid[item.gridIndex].left = 150;
+            newGrid[item.gridIndex].right = 20;
+            newGrid[1].left = 150;
+            newGrid[1].right = 20;
+          } else if (item.gridIndex == 1) {
+            newGrid[0].left = 150;
+            newGrid[0].right = 70;
+            newGrid[item.gridIndex].left = 150;
+            newGrid[item.gridIndex].right = 70;
+          }
+        } else if (newGrid.length == 1) {
+          newGrid[item.gridIndex].left = 150;
+          newGrid[item.gridIndex].right = 20;
+        }
+        item.position = "left";
+        item.max = obj.max;
+        item.min = obj.min;
+        item.interval = obj.interval;
+        item.axisLabel.formatter = (value, index) => {
+          if (krArr[index] || krArr[index] == 0) {
+            return Number(krArr[index]).toFixed(2);
+          } else {
+            return "";
+          }
+        };
+      }
+    });
+    let krObj = seriesArr.find((item) => item.name == "库容");
+    let krObj2 = seriesArr.find((item) => item.name == "5分钟库容");
+    let swObj = seriesArr.find(
+      (item) => item.name == "实测水位" || item.name == "水位"
+    );
+    let swObj2 = seriesArr.find((item) => item.name == "5分钟水位");
+    if (krObj && krObj.data) {
+      krObj.data.forEach((item) => {
+        krData[item[0]] = item[1];
+      });
+    }
+    if (krObj2 && krObj2.data) {
+      krObj2.data.forEach((item) => {
+        krData2[item[0]] = item[1];
+      });
+    }
+    seriesArr.forEach((item) => {
+      if (item.name == "库容") {
+        item.data = swObj.data;
+      } else if (item.name == "5分钟库容") {
+        item.data = swObj2.data;
+      }
+    });
+  }
+  //过滤掉非整时时间，这样取消图例选中后，图表上没有非整时数据
+  let newTimeArr = [...timeArr];
+  if (timeArr.some((item) => isTimeFormat(item))) {
+    newTimeArr = newTimeArr.filter((item) => {
+      let dateTime = dayjs(item);
+      if (
+        isTimeFormat(item) &&
+        dateTime.minute() === 0 &&
+        dateTime.second() === 0
+      ) {
+        return item;
+      }
+    });
+  }
+  if (newGrid.length == 1) {
+    seriesArr.push({
+      name: "a",
+      xAxisIndex: 0,
+      yAxisIndex: 0,
+      data:
+        props.chartOption.series.length == 0
+          ? seriesEmptyArray
+          : newTimeArr.map((item) => [item, undefined]),
+      type: "line",
+      z: 9,
+      zlevel: 9,
+    });
+  } else {
+    seriesArr.push(
+      {
+        name: "a",
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        data:
+          props.chartOption.series.length == 0
+            ? seriesEmptyArray
+            : newTimeArr.map((item) => [item, undefined]),
+        type: "line",
+        z: 9,
+        zlevel: 9,
+      },
+      {
+        name: "b",
+        xAxisIndex: 1,
+        yAxisIndex: newYAxis.findIndex((it) => it.gridIndex == 1),
+        data:
+          props.chartOption.series.length == 0
+            ? seriesEmptyArray
+            : newTimeArr.map((item) => [item, undefined]),
+        type: "line",
+        z: 9,
+        zlevel: 9,
+      }
+    );
+  }
+  //根据图例高度来改变图表距离上边距的高度（图表的上边距与下边距定死只能通过图例高度来改变）
+
+  if (newGrid.length == 1) {
+    newGrid.forEach((item, index) => {
+      item.top = item.newTop ? item.newTop : 10;
+      item.bottom = item.newBottom ? item.newBottom : props.chartOption.xAxis[index].name ? 40 : 20;
+    });
+  } else if (newGrid.length == 2) {
+    newGrid.forEach((item, index) => {
+      if (index == 0) {
+        item.top = 10;
+        item.height = props.chartOption.isTwoXAxis ? "48%" : "26%";
+      } else if (index == 1) {
+        item.top = props.chartOption.isTwoXAxis ? "52%" : "30%";
+        item.bottom = props.chartOption.xAxis[index].name ? 40 : 20;
+      }
+    });
+  } else if (newGrid.length == 3) {
+    newGrid.forEach((item, index) => {
+      if (index == 0) {
+        item.top = 10;
+        item.height = "26%";
+      } else if (index == 1) {
+        item.top = "30%";
+        item.bottom = 40;
+      } else if (index == 2) {
+        item.top = "30%";
+        item.bottom = 40;
+      }
+    });
+  }
+  option.value = {
+    animation: true, // 将 animation 设置为 false 关闭动画效果
+    tooltip: {
+      show: props.chartOption.isTooltipItem || props.chartOption.tooltipShow == false ? false : true,
+      hideDelay: 0,
+      triggerOn: 'mousemove',
+      trigger: props.chartOption.tooltipType == "1" ? "item" : "axis",
+      axisPointer: {
+        animation: false,
+        animationDuration: 1000, // 初始动画时长
+        animationDurationUpdate: 200, // 数据更新动画的时长
+      },
+      formatter: function (params) {
+        if (props.chartOption.tooltipType == "1") {
+          if (params.componentSubType == "boxplot") {
+            let unit = seriesDatas[0] ? seriesDatas[0].unit : "";
+            let str = params.name + "<br/>";
+            str += `<div style='padding-right:8px'>
+                <div style='display:flex;flex-direction: column;'>
+                  <div>${params.marker}\t${params.seriesName}</div>
+                  <div style='display:flex;align-items: center;margin-left: 18px'>
+                    <div style='margin-right:5px;'>最大：${params.value[4] ? params.value[4] : "--"
+              }</div>
+                    <div style='width:30px'>${unit}</div>
+                  </div>
+                  <div style='display:flex;align-items: center;margin-left: 18px'>
+                    <div style='margin-right:5px;'>平均：${params.value[3] ? params.value[3] : "--"
+              }</div>
+                    <div style='width:30px'>${unit}</div>
+                  </div>
+                  <div style='display:flex;align-items: center;margin-left: 18px'>
+                    <div style='margin-right:5px;'>最小：${params.value[2] ? params.value[2] : "--"
+              }</div>
+                    <div style='width:30px'>${unit}</div>
+                  </div>
+                </div>
+              </div>`;
+            return str;
+          }
+        } else if (props.chartOption.tooltipType == "2" || props.chartOption.tooltipType == "4") {
+          let str = "";
+          seriesDatas.forEach((item) => {
+            let obj = params.find((it) => it.seriesName == item.name);
+            if (obj) {
+              let t = obj.axisId;
+              let regExp = /[\u4e00-\u9fa5]+|\([^)]+\)/g;
+              let xMatches = t.match(regExp);
+              let xName = xMatches[0];
+              let xUnit = xMatches[1] ? xMatches[1].replace(/[\(\)]/g, "") : xMatches[0];
+
+              let yMatches = props.chartOption.yAxis[0].name.match(regExp);
+              let yName = yMatches[0]
+              let yUnit = yMatches[1] ? yMatches[1].replace(/[\(\)]/g, "") : yMatches[0];
+              if (props.chartOption.tooltipType == "4") {
+                str += `<div style='font-weight: bold;color: ${item.color};'>${obj.seriesName}</div>`
+              }
+              str += `<div style='padding-right:8px'>
+              <div style='display:flex;align-items: center;justify-content: space-between'>
+                <div style='margin-right:8px;'>${yName}</div>
+                <div style='display:flex;align-items: center;'>
+                  <div style='margin-right:5px;'>${obj.value[1] || obj.value[1] === 0 ? obj.value[1] : "--"
+                }</div>
+                  <div style='width:30px'>${yUnit ? yUnit : ""}</div>
+                </div>
+              </div>
+              <div style='display:flex;align-items: center;justify-content: space-between'>
+                  <div style='margin-right:8px;'>${xName}</div>
+                  <div style='display:flex;align-items: center;'>
+                      <div style='margin-right:5px;'>${obj.value[0] || obj.value[0] === 0 ? obj.value[0] : "--"
+                }</div>
+                      <div style='width:30px'>${xUnit ? xUnit : ""
+                }</div>
+                  </div>
+              </div>
+              </div>`;
+            }
+          });
+          return str;
+        } else if (props.chartOption.tooltipType == "3") {
+          // 使用正则表达式和 replace() 方法移除数字
+          let arr = [];
+          params.forEach((item) => {
+            arr.push(item.seriesName.replace(/\d+/g, ""));
+          });
+          // 使用 reduce() 方法和对象进行字符计数
+          let char = "预报潮位";
+          let str = params[0].value[0] + "<br/>";
+          let num = 0;
+          let html = "";
+          seriesDatas.forEach((item, index) => {
+            let obj = params.find((it) => it.seriesName == item.name);
+            let text = "";
+            if (item.name.includes(char)) {
+              text = props.chartOption.plan[num];
+              num++;
+              if (seriesDatas.find((item) => item.name == "预报潮位1")) {
+                html = `<div>${text}</div>`;
+              }
+            } else {
+              html = "";
+            }
+            if (obj) {
+              let htmlStr = "";
+              if (obj.value[1]) {
+                htmlStr = `<div style='padding-right:8px'>
+                ${html}
+                <div style='display:flex;align-items: center;justify-content: space-between'>
+                <div style='margin-right:8px;'>${obj.marker
+                  }\t${obj.seriesName.replace(/\d+/g, "")}</div>
+                <div style='display:flex;align-items: center;'>
+                  <div style='margin-right:5px;'>${obj.value[1] ? obj.value[1] : "--"
+                  }</div>
+                  <div style='width:30px'>${item.unit ? item.unit : ""}</div>
+                </div>
+              </div>
+              </div>`;
+              }
+              str += htmlStr;
+            }
+          });
+          return str;
+        } else {
+          let str = "";
+          if (props.chartOption.tooltipNameTimeType) {
+            if (Array.isArray(params[0].value)) {
+              str =
+                dayjs(params[0].value[0]).format(
+                  props.chartOption.tooltipNameTimeType
+                ) + "<br/>";
+            } else {
+              str =
+                dayjs(params[0].name).format(
+                  props.chartOption.tooltipNameTimeType
+                ) + "<br/>";
+            }
+          } else {
+            if (Array.isArray(params[0].value)) {
+              // 对特殊字符进行 HTML 转义，防止被解析为 HTML 标签
+              const xAxisValue = String(params[0].value[0])
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+              str = xAxisValue + "<br/>";
+            } else {
+              str = params[0].name + "<br/>";
+            }
+          }
+          seriesDatas.forEach((item) => {
+            let obj = params.find((it) => it.seriesName == item.name);
+            if (obj) {
+              if (Array.isArray(obj.value) && obj.value[2] === true) {
+
+              } else {
+                let seriesName = '';
+                if (item.key) {
+                  seriesName = item.key;
+                } else {
+                  legendArr.value.forEach((it) => {
+                    if (it.name == obj.seriesName) {
+                      seriesName = it.key ? it.key : item.name;
+                    } else if (it.children) {
+                      it.children.forEach((i) => {
+                        if (i.name == obj.seriesName) {
+                          seriesName = i.key;
+                        }
+                      });
+                    }
+                  });
+                }
+                let htmlStr = "";
+                let marker = "";
+                if (
+                  obj.marker ==
+                  '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:transparent;"></span>'
+                ) {
+                  marker = `<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${legendAllColor[item.name]?.color
+                    };\"></span>`;
+                } else {
+                  marker = obj.marker;
+                }
+                if (obj.value) {
+                  let val = '';
+                  if (item.data2) {
+                    let newDataObj = item.data2.find(item => item[0] == obj.value[0])
+                    val = newDataObj[1]
+                  } else {
+                    if (Array.isArray(obj.value)) {
+                      val = obj.value[1]
+                    } else {
+                      val = obj.value
+                    }
+                  }
+                  if (JSON.stringify(krData) != "{}" && obj.seriesName == "库容") {
+                    val = krData[params[0].value[0]];
+                  } else if (JSON.stringify(krData2) != "{}" && obj.seriesName == "5分钟库容") {
+                    val = krData2[params[0].value[0]];
+                  }
+                  htmlStr = `<div style='padding-right:8px'>
+                <div style='display:flex;align-items: center;justify-content: space-between'>
+                <div style='margin-right:8px;'>${marker}\t${seriesName ? seriesName : obj.seriesName
+                    }</div>
+                <div style='display:flex;align-items: center;'>
+                  <div style='margin-right:5px;'>${val || val === 0 ? val : '--'}</div>
+                  <div style='width:30px'>${item.unit ? item.unit : ""}</div>
+                </div>
+              </div>
+              </div>`;
+                }
+                str += htmlStr;
+              }
+            }
+          });
+          return str;
+        }
+      },
+    },
+    legend: {
+      show: false,
+      selected: selected,
+    },
+    grid: newGrid,
+    axisPointer: {
+      link: {
+        xAxisIndex: "all",
+      },
+    },
+    xAxis: newXAxis,
+    yAxis: newYAxis,
+    dataZoom: [
+      {
+        type: "inside", //内置滑动，随鼠标滚轮展示
+        xAxisIndex: [0, 1],
+        zoomLock: props.chartOption.zoomLock ? true : false,
+        start: props.chartOption.viewDataRange
+          ? props.chartOption.viewDataRange[0]
+          : 0,
+        end: props.chartOption.viewDataRange
+          ? props.chartOption.viewDataRange[1]
+          : 100,
+        moveOnMouseMove: props.chartOption.series.some(
+          (item) => item.openBarDrag && (item.type == "line" || item.type == "markLine")
+        )
+          ? "ctrl"
+          : true,
+      },
+    ],
+    series: seriesArr,
+  };
+  if (props.chartOption.visualMap) {
+    option.value.visualMap = props.chartOption.visualMap.map((item) => {
+      let seriesObj = seriesArr[item.seriesIndex];
+      let pieces = [],
+        newPieces = [];
+      if (item.step) {
+        newPieces = getMultipleTimeRange(item.pieces, item.step);
+      } else {
+        newPieces = item.pieces;
+      }
+      newPieces.forEach((it, inx) => {
+        let startIndex = new Date(it.startTm).getTime();
+        let endIndex = new Date(it.endTm).getTime();
+        if (inx == 0) {
+          pieces.push(
+            {
+              lt: startIndex,
+              color: seriesObj.itemStyle.color,
+            },
+            {
+              gte: startIndex,
+              lte: endIndex,
+              color: item.color ? item.color : "red",
+            }
+          );
+        } else {
+          pieces.push(
+            {
+              gt: pieces[pieces.length - 1].lte,
+              lt: startIndex,
+              color: seriesObj.itemStyle.color,
+            },
+            {
+              gte: startIndex,
+              lte: endIndex,
+              color: item.color ? item.color : "red",
+            }
+          );
+        }
+      });
+      pieces.push({
+        gt: pieces[pieces.length - 1].lte,
+        color: seriesObj.itemStyle.color,
+      });
+      return {
+        show: false,
+        dimension: item.dimension ? item.dimension : 0,
+        seriesIndex: item.seriesIndex,
+        pieces: pieces,
+      };
+    });
+  }
+  if (JSON.stringify(dataZoom) != "{}") {
+    option.value.dataZoom[0] = dataZoom;
+  }
+  console.log(option.value);
+  myChart.setOption(option.value, true);
+  myChart.getOption().series.map((item) => {
+    if (item.markPoint) {
+      markPointList[item.name] = item.markPoint;
+    }
+  });
+  if (props.chartOption.isTooltipItem) {
+    let customTooltipDom = document.createElement("div");
+    customTooltipDom.className = "line-name-tooltip-style";
+    chartDom.appendChild(customTooltipDom);
+    myChart.on("mouseover", function (params) {
+      // 1. 仅在需要显示的场景下创建 DOM（如 hover 到系列数据时，可根据需求调整条件）
+      if (params.componentType === "series" && params.seriesType === "line") {
+        customTooltipDom.innerText = `${params.seriesName}`;
+        // 设置 DOM 位置
+        customTooltipDom.style.left = `${params.event.offsetX}px`;
+        customTooltipDom.style.top = `${params.event.offsetY}px`;
+        // 显示 DOM（修改 opacity 触发过渡动画）
+        customTooltipDom.style.opacity = "1";
+      } else {
+        if (customTooltipDom) {
+          customTooltipDom.style.opacity = "0";
+        }
+      }
+    })
+    myChart.on("mouseout", function (params) {
+      if (customTooltipDom) {
+        customTooltipDom.style.opacity = "0";
+      }
+    })
+  } else {
+    const tooltips = chartDom.querySelectorAll('.line-name-tooltip-style');
+    if (tooltips.length > 0) {
+      tooltips.forEach(item => {
+        item.remove();
+      });
+    }
+  }
+  //点击做标记
+  myChart.off("click");
+  myChart.on("click", (params) => {
+    if (seriesDatas.find((item) => item.name == params.seriesName)) {
+      let seriesObj = seriesDatas.find(
+        (item) => item.name == params.seriesName
+      );
+      if (params.seriesType === "line") {
+        const pointData = params.data;
+        const seriesIndex = params.seriesIndex;
+        let markData = myChart.getOption().series[seriesIndex].markPoint
+          ? myChart.getOption().series[seriesIndex].markPoint.data
+          : [];
+        let names = markData
+          .filter((it) => it.name != "Max" && it.name != "Min")
+          .map((it) => it.coord[0]);
+        let data = [];
+
+        let offset;
+        timeArr.forEach((item, index) => {
+          if (dayjs(item).isValid() && item == pointData[0]) {
+            if (index >= (timeArr.length / 5) * 4) {
+              offset = [-200, 0];
+            } else if (index >= (timeArr.length / 5) * 3) {
+              offset = [-150, 0];
+            } else if (index >= (timeArr.length / 5) * 2) {
+              offset = [-100, 0];
+            } else if (index >= (timeArr.length / 5) * 1) {
+              offset = [-50, 0];
+            } else if (index >= 0) {
+              offset = [0, 0];
+            }
+          }
+        });
+        if (!names.includes(params.value[0])) {
+          data = [
+            ...markData,
+            {
+              coord: pointData,
+              name: `${pointData[0]}\n${params.seriesName}: ${pointData[1]} ${seriesObj.unit}`,
+              label: {
+                offset: offset ? offset : [-120, 0],
+              },
+            },
+          ];
+        } else {
+          data = markData.filter(
+            (it) =>
+              it.name == "Max" ||
+              it.name == "Min" ||
+              it.coord[0] != params.value[0]
+          );
+        }
+        option.value.series[seriesIndex].markPoint = {
+          symbol: "pin",
+          symbolSize: 20,
+          label: {
+            show: true,
+            position: "top",
+            align: "left",
+            fontSize: 16,
+            backgroundColor: seriesObj.backgroundColor
+              ? seriesObj.backgroundColor
+              : legendAllColor[seriesObj.name]
+                ? legendAllColor[seriesObj.name].color
+                : seriesObj.color,
+            borderRadius: 6,
+            shadowColor: "#666666",
+            shadowBlur: 5,
+            shadowOffsetX: 3,
+            shadowOffsetY: 3,
+            fontWeight: "bold",
+            padding: [4, 4, 4, 4],
+            lineHeight: 30,
+            color: seriesObj.markPointColor ? seriesObj.markPointColor : "#fff",
+            formatter: (par) => {
+              let maxTime = "",
+                tmType = seriesObj.tmType
+                  ? seriesObj.tmType
+                  : "YYYY-MM-DD HH:mm";
+              if (par.data && par.data.coord && par.data.coord[0]) {
+                maxTime = dayjs(par.data.coord[0]).format(tmType);
+              }
+              let text = "";
+              let value = "";
+              if (par.name == "Max" || par.name == "Min") {
+                if (par.name == "Max") {
+                  text = seriesObj.maxText ? seriesObj.maxText : "最大值";
+                  if (seriesObj.unit.includes("m³")) {
+                    value = par.value ? formatToFlowValue(par.value) : "--";
+                  } else if (seriesObj.unit.includes("mm")) {
+                    value = par.value ? Number(par.value).toFixed(1) : "--";
+                  } else if (seriesObj.unit.includes("m")) {
+                    value = par.value ? Number(par.value).toFixed(2) : "--";
+                  } else {
+                    value = par.value;
+                  }
+                  if (seriesObj.tmText) {
+                    return `${text}: {a0|${value}} ${seriesObj.unit}\n${seriesObj.tmText}: {a1|${maxTime}}`;
+                  } else {
+                    return `${seriesObj.tmText2 ? seriesObj.tmText2 : "相应时间"
+                      }: {a1|${maxTime}}\n${text}: {a0|${value}} ${seriesObj.unit
+                      }`;
+                  }
+                }
+              } else {
+                return `相应时间: {a1|${dayjs(par.data.coord[0]).format(
+                  tmType
+                )}}\n${seriesObj.name}: {a0|${par.data.coord[1]}} ${seriesObj.unit
+                  }`;
+              }
+            },
+            rich: {
+              a0: {
+                fontSize: 25,
+                fontFamily: "Times New Roman",
+              },
+              a1: {
+                fontSize: 20,
+                fontFamily: "Times New Roman",
+              },
+            },
+          },
+          data: data,
+        };
+        option.value.dataZoom[0] = { ...myChart.getOption()?.dataZoom[0] };
+        myChart.setOption(option.value, true);
+        myChart.getOption().series.map((item) => {
+          if (item.markPoint) {
+            markPointList[item.name] = item.markPoint;
+          }
+        });
+      }
+    }
+  });
+  // 监听鼠标按下事件
+  myChart.on("mousedown", function (params) {
+    // 手动触发 tooltip 关闭
+    myChart.setOption({
+      tooltip: {
+        show: false
+      }
+    })
+    myChart.dispatchAction({
+      type: "hideTip"
+    });
+    let seriesIndex = params.seriesIndex;
+    let seriesObj = props.chartOption.series[seriesIndex];
+    let stepTM = seriesObj.stepTM ? seriesObj.stepTM : 60;
+    let ksTime = '', jsTime = '', diffHour = '';
+    if (seriesObj.openBarDrag) {
+      let newSeriesData = {}, trackTimes = {}, yObj = props.chartOption.yAxis[seriesObj.yAxisIndex], newSeriesArr = [];
+      if (params.componentType == "markLine" && seriesObj.data.name == "xAxis") {
+        newSeriesArr = option.value.series.map((item, index) => {
+          if (item.name == '开始' || item.name == '结束') {
+            return JSON.parse(JSON.stringify(item))
+          } else {
+            return {}
+          }
+        })
+      } else {
+        newSeriesArr = option.value.series.map((item, index) => {
+          if (index == seriesIndex) {
+            return {
+              data: JSON.parse(JSON.stringify(item.data))
+            }
+          } else {
+            return {}
+          }
+        })
+      }
+      let lastXValue, lastYValue, lastXValue2;
+      if (props.chartOption.fixedTimePeriod) {
+        ksTime = props.chartOption.series.find(item => item.name == '开始').data.value
+        jsTime = props.chartOption.series.find(item => item.name == '结束').data.value
+        diffHour = dayjs(jsTime).diff(dayjs(ksTime), 'hour')
+      }
+      myChart.getZr().off("mousemove");
+      myChart.getZr().off("mouseup");
+      myChart.getZr().on("mousemove", function (event) {
+        if (params.componentType == "markLine" && seriesObj.data.name == "xAxis") {
+          let valueDelta = myChart.convertFromPixel(
+            { xAxisIndex: seriesObj.xAxisIndex },
+            event.offsetX
+          );
+          let newTime = dayjs(valueDelta).format("YYYY-MM-DD HH:00")
+          if (newTime !== lastXValue) {
+            const time1 = dayjs(newTime);
+            const time2 = dayjs(timeArr[timeArr.length - 1]);
+            const time3 = sectionStartTime ? dayjs(sectionStartTime) : '';
+            if (time1.isAfter(time2) || time1.isBefore(time3)) {
+              return;
+            }
+            if (props.chartOption.fixedTimePeriod) {
+              if (seriesObj.name == '开始') {
+                lastXValue2 = dayjs(newTime).add(diffHour, 'hours').format("YYYY-MM-DD HH:00")
+              } else if (seriesObj.name == '结束') {
+                lastXValue2 = dayjs(newTime).add(-diffHour, 'hours').format("YYYY-MM-DD HH:00")
+              }
+              if (seriesObj.name == '开始' && dayjs(lastXValue2).isAfter(time2)) {
+                return;
+              } else if (seriesObj.name == '结束' && dayjs(lastXValue2).isBefore(time3)) {
+                return;
+              }
+              newSeriesArr.forEach(item => {
+                if (seriesObj.name == '开始') {
+                  if (item.name == '开始') {
+                    item.markLine.data[0].xAxis = newTime
+
+                    item.markArea.data[0][0].xAxis = newTime
+                    item.markArea.data[0][1].xAxis = lastXValue2
+                  } else if (item.name == '结束') {
+                    item.markLine.data[0].xAxis = lastXValue2
+                  }
+                } else if (seriesObj.name == '结束') {
+                  if (item.name == '开始') {
+                    item.markLine.data[0].xAxis = lastXValue2
+
+                    item.markArea.data[0][0].xAxis = lastXValue2
+                    item.markArea.data[0][1].xAxis = newTime
+                  } else if (item.name == '结束') {
+                    item.markLine.data[0].xAxis = newTime
+                  }
+                }
+              })
+            } else {
+              newSeriesArr.forEach(item => {
+                if (seriesObj.name == '开始') {
+                  if (item.name == '开始') {
+                    item.markLine.data[0].xAxis = newTime
+
+                    item.markArea.data[0][0].xAxis = newTime
+                  }
+                } else if (seriesObj.name == '结束') {
+                  if (item.name == '开始') {
+                    item.markArea.data[0][1].xAxis = newTime
+                  } else if (item.name == '结束') {
+                    item.markLine.data[0].xAxis = newTime
+                  }
+                }
+              })
+            }
+            myChart.setOption({
+              series: newSeriesArr
+            }, {
+              notMerge: false,
+              lazyUpdate: true
+            });
+            // 更新记录值
+            lastXValue = newTime;
+          }
+        } else {
+          let [x, y] = myChart.convertFromPixel({ seriesIndex: seriesIndex }, [
+            event.offsetX,
+            event.offsetY,
+          ])
+          if ((dayjs(x).format("YYYY-MM-DD HH:00") !== lastXValue) || (!lastYValue || Math.abs(y - lastYValue) >= 0.5)) {
+            const currentX = dayjs(x).format("YYYY-MM-DD HH:00");
+            trackTimes[currentX] = y;
+
+            // 优化数据处理，使用 Map 或 Set 提高查找效率
+            let trackTimesKeys = Object.keys(trackTimes);
+            let trackTimesSet = new Set(trackTimesKeys);
+
+            newSeriesArr[seriesIndex].data.forEach((item) => {
+              if (trackTimesSet.has(item[0])) {
+                item[1] = trackTimes[item[0]];
+              }
+            });
+
+            let times = getTimeRange(
+              new Date(trackTimesKeys[0]),
+              new Date(trackTimesKeys[trackTimesKeys.length - 1]),
+              stepTM
+            );
+
+            let trackData = Object.entries(trackTimes);
+            let timesSet = new Set(trackTimesKeys);
+            times.forEach((item) => {
+              if (!timesSet.has(item)) {
+                trackData.push(AddDataForAppointTime(trackData, item));
+              }
+            });
+
+            let newTrackTimes = {};
+            trackData.forEach((item) => {
+              newTrackTimes[item[0]] = item[1];
+            });
+            let newTrackTimesKeys = Object.keys(newTrackTimes);
+            let newTrackTimesSet = new Set(newTrackTimesKeys);
+
+            newSeriesArr[seriesIndex].data.forEach((item) => {
+              if (newTrackTimesSet.has(item[0])) {
+                let val = "";
+                if (yObj.name.includes("m³")) {
+                  val = formatToFlowValue(newTrackTimes[item[0]]);
+                } else if (yObj.name.includes("mm")) {
+                  val = newTrackTimes[item[0]].toFixed(1);
+                } else if (yObj.name.includes("m")) {
+                  val = newTrackTimes[item[0]].toFixed(2);
+                }
+                item[1] = val;
+              }
+            });
+
+            myChart.setOption({
+              series: newSeriesArr
+            }, {
+              notMerge: false,
+              lazyUpdate: true
+            });
+
+            // 更新记录值
+            lastXValue = currentX;
+            lastYValue = y
+          }
+        }
+      });
+      // 监听鼠标松开事件
+      myChart.getZr().on("mouseup", function () {
+        myChart.getZr().off("mousemove");
+        myChart.getZr().off("mouseup");
+        if (params.componentType == "markLine" && seriesObj.data.name == "xAxis") {
+          if (lastXValue) {
+            if (lastXValue2) {
+              const time1 = dayjs(timeArr[timeArr.length - 1]);
+              const time2 = sectionStartTime ? dayjs(sectionStartTime) : '';
+              if (seriesObj.name == '开始' && dayjs(lastXValue2).isAfter(time1)) {
+                lastXValue2 = dayjs(lastXValue).add(diffHour, 'hours').format("YYYY-MM-DD HH:00")
+              } else if (seriesObj.name == '结束' && dayjs(lastXValue2).isBefore(time2)) {
+                lastXValue2 = dayjs(lastXValue).add(-diffHour, 'hours').format("YYYY-MM-DD HH:00")
+              }
+              newSeriesData = {
+                name: '开始/结束',
+                value: seriesObj.name == '开始' ? `${lastXValue}/${lastXValue2}` : `${lastXValue2}/${lastXValue}`
+              };
+            } else {
+              newSeriesData = {
+                name: seriesObj.name,
+                value: lastXValue
+              };
+            }
+          }
+        } else {
+          newSeriesData = {
+            name: params.seriesName,
+            data: newSeriesArr[seriesIndex].data
+          };
+        }
+        if (newSeriesData.name) {
+          emit("getNewSeriesData", newSeriesData);
+        }
+        //开启鼠标悬浮时的 tooltip 显示
+        myChart.getZr().on("mousemove", function (par) {
+          // 获取鼠标坐标
+          let x = par.offsetX;
+          let y = par.offsetY;
+          // 手动触发 tooltip 显示
+          myChart.dispatchAction({
+            type: "showTip",
+            x: x,
+            y: y,
+          });
+        });
+      });
+    }
+  });
+  window.onresize = function () {
+    myChart.resize();
+  };
+};
+// 当元素宽高发生变化时，触发下面的方法
+const onResize = (dom) => {
+  nextTick(() => {
+    if (myChart) {
+      myChart.resize();
+    }
+  });
+};
+const legendSelect = (name, e) => {
+  myChart.dispatchAction({
+    type: e ? "legendSelect" : "legendUnSelect",
+    // 图例名称
+    name: name,
+  });
+};
+
+function isAnnualFirstDay(dateToCheck) {
+  return (
+    dateToCheck.month() === 0 &&
+    dateToCheck.date() === 1 &&
+    dateToCheck.hour() === 0 &&
+    dateToCheck.minute() === 0
+  );
+}
+
+function handleContextMenu(event) {
+  event.preventDefault(); // 阻止默认的右键菜单弹出
+
+  // 判断是否存在类名为 chartMenu 的元素
+  let chartMenu = document.querySelector("body .chartMenu");
+
+  // 如果存在，则删除该元素
+  if (chartMenu) {
+    chartMenu.remove();
+  }
+
+  let x = event.pageX; // 获取鼠标点击位置的横坐标
+  let y = event.pageY; // 获取鼠标点击位置的纵坐标
+
+  // 创建并显示自定义菜单
+  let menu = document.createElement("ul");
+  menu.style.position = "absolute";
+  menu.style.left = x + "px";
+  menu.style.top = y + "px";
+  menu.className = "chartMenu";
+
+  // 添加菜单项
+  let item1 = document.createElement("li");
+  item1.style.cursor = "pointer";
+  item1.innerHTML = `<div><img src='${restorePng}'><span>还原缩放</span></div>`;
+  menu.appendChild(item1);
+
+  let item2 = document.createElement("li");
+  item2.style.cursor = "pointer";
+  item2.innerHTML = `<div><img src='${copyPng}'><span>复制图片</span></div>`;
+  menu.appendChild(item2);
+
+  let item3 = document.createElement("li");
+  item3.style.cursor = "pointer";
+  item3.innerHTML = `<div><img src='${exportPng}'><span>导出图片</span></div>`;
+  menu.appendChild(item3);
+
+  // 添加点击菜单项的事件处理
+  item1.addEventListener("click", () => {
+    myChart.dispatchAction({
+      type: "dataZoom",
+      dataZoomIndex: 0,
+      start: 0,
+      end: 100,
+    });
+  });
+
+  item2.addEventListener("click", () => {
+    html2canvas(chartBox.value, {
+      // dpi: 300,   // 精度，处理模糊问题
+      useCORS: true, // 允许跨域
+      scale: 2, // 当前显示设备的物理像素分辨率与CSS像素分辨率之比
+      width: chartBox.value.offsetWidth, //图片宽度可自行设置
+      height: chartBox.value.offsetHeight + 50, //图片高度可自行设置
+      backgroundColor: "#fff", //图片背景色
+      allowTaint: true, //若是 useCORS:true,且同时设置allowTaint为true，仍然会认为画布已被污染而不可用。
+      removeContainer: true, // 清除临时创建的克隆dom元素
+      // eslint-disable-next-line space-before-function-paren
+    }).then((canvas) => {
+      // 获取图像数据URL
+      const imageDataURL = canvas.toDataURL("image/png");
+      const file = base64toFile(imageDataURL, "图片"); // 转file
+      copyFile(file);
+      ElMessage.success("复制成功");
+    });
+  });
+
+  item3.addEventListener("click", () => {
+    exportChartPng();
+  });
+
+  // 将菜单添加到页面中
+  document.body.appendChild(menu);
+  // 点击页面其他地方时，隐藏菜单
+  document.addEventListener("click", () => {
+    if (menu.parentNode) {
+      document.body.removeChild(menu);
+    }
+  });
+}
+const base64toFile = (dataBase64, filename = "file") => {
+  const arr = dataBase64.split(",");
+  const mime = arr[0].match(/:(.*?);/)[1]; // 获取file文件流的type名称
+  const suffix = mime.split("/")[1]; // 获取文件类型
+  const bstr = window.atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], `${filename}.${suffix}`, {
+    type: mime,
+  });
+};
+const copyFile = (file) => {
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const newFile = e.target.result.toString();
+    const img = new Image();
+    img.src = newFile;
+    img.onload = () => {
+      //blob对象在写入时可能会出现格式出题,所以先将图片解析成base64，在转换成blob对象写入，减少后面不必要的麻烦
+      let base64 = imageBase64(img);
+      let blob = base64ToBlob(
+        base64.replace("data:image/png;base64,", ""),
+        "image/png",
+        512
+      );
+      navigator.clipboard.write([
+        new ClipboardItem({
+          "image/png": blob,
+        }),
+      ]);
+    };
+  };
+  reader.readAsDataURL(file);
+};
+//先将图片解析成base64
+const imageBase64 = (img) => {
+  let canvas = document.createElement("canvas");
+  canvas.width = img.width;
+  canvas.height = img.height;
+  let ctx = canvas.getContext("2d");
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+  let dataURL = canvas.toDataURL("image/png");
+  return dataURL;
+};
+// 再转成blod // 注意base64里面的特殊符号 在atob的时候不能识别“,”
+const base64ToBlob = (b64Data, contentType, sliceSize) => {
+  contentType = contentType || "";
+  sliceSize = sliceSize || 512;
+  let byteCharacters = window.atob(b64Data);
+  // var byteCharacters  = b64Data;
+  // 该atob函数将base64编码的字符串解码为一个新字符串，其中包含二进制数据每个字节的字符。
+  let byteArrays = [];
+  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+    let slice = byteCharacters.slice(offset, offset + sliceSize);
+    let byteNumbers = new Array(slice.length);
+    // 通过使用.charCodeAt字符串中每个字符的方法应用它来创建一个新的数组。
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+    // 将这个数组转换为实际类型的数组，方法是将其传递给Uint8Array构造函数。
+    let byteArray = new Uint8Array(byteNumbers);
+    byteArrays.push(byteArray);
+  }
+  // 创建一个blob：包含这条数据的URL，返回去。
+  let blob = new Blob(byteArrays, { type: contentType });
+  return blob;
+};
+
+const exportChartPng = () => {
+  html2canvas(chartBox.value, {
+    // dpi: 300,   // 精度，处理模糊问题
+    useCORS: true, // 允许跨域
+    scale: 1, // 当前显示设备的物理像素分辨率与CSS像素分辨率之比
+    width: chartBox.value.offsetWidth, //图片宽度可自行设置
+    height: chartBox.value.offsetHeight + 50, //图片高度可自行设置
+    backgroundColor: "#fff", //图片背景色
+    allowTaint: true, //若是 useCORS:true,且同时设置allowTaint为true，仍然会认为画布已被污染而不可用。
+    removeContainer: true, // 清除临时创建的克隆dom元素
+    // eslint-disable-next-line space-before-function-paren
+  }).then((canvas) => {
+    // 获取图像数据URL
+    const imageDataURL = canvas.toDataURL("image/png");
+
+    // 创建下载链接
+    const link = document.createElement("a");
+    link.href = imageDataURL;
+    link.download = props.chartOption.title;
+
+    // 模拟点击链接进行下载
+    link.click();
+  });
+};
+const myLegend = ref();
+function getLegendBoxHeight() {
+  if (myLegend.value) {
+    return myLegend.value.offsetHeight;
+  } else {
+    return 0;
+  }
+}
+function cotwlTransformation(val, i) {
+  return new Promise((resolve) => {
+    GetCotwlTransformation({
+      STCD: props.chartOption.stationCode,
+      rzw: val,
+      rzwType: "rz",
+    }).then((res) => {
+      if (res.statusCode == 200 && res.data) {
+        resolve(res.data);
+      } else {
+        resolve(i * 1000);
+      }
+    });
+  });
+}
+
+//曲线插值
+function AddDataForAppointTime(data, appointTime) {
+  if (data.length > 0) {
+    let beforeData = data.filter((item) =>
+      dayjs(item[0]).isBefore(dayjs(appointTime))
+    );
+    let afterData = data.filter((item) =>
+      dayjs(item[0]).isAfter(dayjs(appointTime))
+    );
+    if (beforeData.length == 0) {
+      return [appointTime, afterData[0][1]];
+    } else if (afterData.length == 0) {
+      return [appointTime, beforeData[beforeData.length - 1][1]];
+    } else {
+      let secondsDifference = dayjs(appointTime).diff(
+        dayjs(beforeData[beforeData.length - 1][0]),
+        "seconds"
+      );
+      let diffValue = afterData[0][1] - beforeData[beforeData.length - 1][1];
+      let diffTmValue = dayjs(afterData[0][0]).diff(
+        dayjs(beforeData[beforeData.length - 1][0]),
+        "seconds"
+      );
+      let val =
+        (secondsDifference * diffValue) / diffTmValue +
+        beforeData[beforeData.length - 1][1];
+      return [appointTime, Number(val)];
+    }
+  }
+}
+
+function formatSecondTime(time2) {
+  let time1 = props.chartOption.series.find(item => item.name == '开始')?.data.value
+  // 解析时间
+  const d1 = dayjs(time1);
+  const d2 = dayjs(time2);
+
+  // 检查年是否相同
+  const isSameYear = d1.year() === d2.year();
+  // 检查月是否相同（考虑年份相同的前提）
+  const isSameMonth = isSameYear && d1.month() === d2.month();
+
+  if (isSameMonth) {
+    // 年月都相同 - 返回 日 时间
+    return d2.format('DD HH:mm');
+  } else if (isSameYear) {
+    // 年相同月不同 - 返回 月-日 时间
+    return d2.format('MM-DD HH:mm');
+  } else {
+    // 年月都不同 - 返回 年-月-日 时间
+    return d2.format('YYYY-MM-DD HH:mm');
+  }
+}
+
+defineExpose({
+  getLegendBoxHeight,
+  onChange,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>