<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef("");

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //标题
  title: {
    type: String,
    default: "",
  },
  //数据
  data: {
    type: Object,
    default: {},
  },
});
watch(
  () => props.refresh,
  (value) => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  //获取湿度的最大值和最小值
  let shiDuMax = Math.max(...props.data.ydata2);
  let shiDuMin = Math.min(...props.data.ydata2);
  //温度的最大值和最小值
  let temMax = Math.max(...props.data.ydata1);
  let temMin = Math.min(...props.data.ydata1);
  // 绘制图表
  myChart.value.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "80px",
      right: "30px",
      top: "55px",
      bottom: "20px",
    },
    legend: {},
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        dataView: { readOnly: false },
        magicType: { type: ["line", "bar"] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: props.data.xdata,
      axisLabel: {
        textStyle: {
          color: "#222",
        },
      },
    },
    yAxis: [
      {
        position: "left",
        type: "value",
        name: "温度°C",
        splitLine: {
          show: false,
        },
        nameGap: 20,
        max: parseInt(temMax * 1.1),
        min: parseInt(temMin * 0.8),
        nameTextStyle: {
          color: "#222",
          fontSize: 12,
          padding: [0, 0, 0, -35],
        },
        axisLabel: {
          textStyle: {
            color: "#222", //字体颜色
            fontSize: 12, //字体大小
          },
        },
      },
      {
        position: "left",
        offset: 45, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
        type: "value",
        name: "湿度%",
        min: parseInt(shiDuMin * 0.8),
        splitLine: {
          show: false,
        },
        nameGap: 20,
        nameTextStyle: {
          color: "#222",
          fontSize: 12,
          padding: [0, 0, 0, -35],
        },
        axisLabel: {
          textStyle: {
            color: "#222", //字体颜色
            fontSize: 12, //字体大小
          },
        },
      },
      {
        position: "right",
        type: "value",
        name: "降雨量mm",
        splitLine: {
          show: false,
        },
        nameGap: 20,
        nameTextStyle: {
          color: "#222",
          fontSize: 12,
        },
        axisLabel: {
          textStyle: {
            color: "#222", //字体颜色
            fontSize: 12, //字体大小
          },
        },
      },
    ],
    series: [
      {
        name: "温度",
        type: "line",
        data: props.data.ydata1,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },

        yAxisIndex: 0,
      },
      {
        name: "湿度",
        type: "line",
        data: props.data.ydata2,
        yAxisIndex: 1,
      },
      {
        name: "降雨量",
        type: "line",
        data: props.data.ydata3,
        yAxisIndex: 2,
      },
    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>