<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      width="1500px"
      height="400px"
      @close="close"
    >
      <el-card v-loading="loading" style="height: 400px">
        <div :id="divId" ref="echarts" style="height: 380px"></div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getReportHistoryData } from '@/api/device';
export default {
  name: 'Watergraph',
  data() {
    return {
      title: '曲线图',
      dialogFormVisible: false,
      chartData: [],
      loading: true,
      divId: 'waterChar',
    };
  },
  created() {},
  methods: {
    // 获取数据
    showData(row, id) {
      this.divId = id;
      this.loading = true;
      this.dialogFormVisible = true;
      this.chartData = [];
      this.chartData = JSON.stringify(row);
      this.title = row['站点名称'] + ' - 曲线图';
      setTimeout(() => {
        this.chartIni();
        this.loading = false;
      }, 3000);
    },
    // 初始化折线图
    chartIni() {
      var myChart = echarts.init(document.getElementById(`${this.divId}`));
      var option;
      var data = JSON.parse(this.chartData);
      var yData = [];
      var xData = [];
      for (const key in data) {
        if (key !== '站点名称') {
          yData.push(data[key]);
          xData.push([key, data[key]]);
        }
      }
      var min = Math.min.apply(null, yData);
      var max = Math.max.apply(null, yData);
      option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          },
        },
        title: {
          left: 'center',
          text: '折线图',
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          min: min,
          max: max,
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            name: '数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: xData,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    async getReportHistory() {
      var myChart = echarts.init(document.getElementById('main4'));
      var option;
      const { data } = await getReportHistoryData(this.queryForm);
      var yData = [];
      for (let i = 0; i < data.length; i++) {
        yData.push(data[i][1]);
      }
      var min = Math.min.apply(null, yData);
      var max = Math.max.apply(null, yData);
      option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          },
        },
        title: {
          left: 'center',
          text: '折线图',
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          min: min,
          max: max,
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            name: '数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: data,
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped></style>
