<template>
  <div id="PS_ckzcsw">
    <div id="chartHistoryZM"></div>
  </div>
</template>

<script setup name="PS_ckzcsw">
import { ref, reactive, toRefs, onMounted } from 'vue';
import chartOption from '@/views/oneMap/Echarts/pieChart_1.js';
import * as echarts from 'echarts';

// 河道echarts
let chartRiver = null;
function getRiverData() {
  chartRiver && chartRiver.dispose();
  chartRiver = echarts.init(document.getElementById('chartHistoryZM'));
  // echarts赋值
  let arrs = [
    {
      riverX: [0, 10, 20, 30, 40, 50],
      riverY: [1394, 1394, 1384, 1390, 1395.5, 1396],
      sfZ: 23.5,
      z: 1393.5,
    },
  ];
  chartOption.floodOneMapFXYP.xAxis[0].data = arrs[0].riverX;
  chartOption.floodOneMapFXYP.series[1].data = arrs[0].riverY;
  chartOption.floodOneMapFXYP.series[1].markLine.data[0].yAxis = arrs[0].sfZ;
  chartOption.floodOneMapFXYP.series[1].markLine.data[0].label.formatter = '设防水位 ' + arrs[0].sfZ + 'm';
  let arrs2 = [];
  arrs[0].riverX.map(item => {
    arrs2.push(arrs[0].z);
  });
  chartOption.floodOneMapFXYP.series[0].data = arrs2;
  if (arrs[0].riverX.length == 0) {
    chartOption.floodOneMapFXYP.graphic.invisible = false; //暂无数据
  } else {
    chartOption.floodOneMapFXYP.graphic.invisible = true; //暂无数据
  }
  chartRiver.clear();
  chartRiver.setOption(chartOption.floodOneMapFXYP);
}

onMounted(() => {
  setTimeout(() => {
    getRiverData();
  }, 1000);
});
</script>

<style lang="scss" scoped>
#PS_ckzcsw {
  width: 100%;
  height: 100%;
  #chartHistoryZM {
    width: 100%;
    height: 100%;
    margin-top: 10px;
  }
}
</style>