<template>
  <!-- 天气温度平滑折线图 -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from "@/utils/ruoyi";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef("");
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  data: {
    type: Object,
    default: {},
  },
});

watch(
  () => props.data,
  (value) => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    init();
  },
  {
    deep: true,
  }
);

function init() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  console.log(myChart.value);
  var option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      boundaryGap: false,
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
      },
      splitLine: {
        show: false, // 不显示网格线
      },
    },
    grid: {
      left: "40px",
      right: "40px",
      top: "35px",
      bottom: "20px",
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
      },
      splitLine: {
        show: false, // 不显示网格线
      },
    },

    series: [
      {
        data: props.data.ydata2,
        type: "line",
        lineStyle: {
          color: "#FF9C40",
        },
        itemStyle: {
          normal: {
            color: "#FF9C40", //折点颜色
            label: {
              show: true, //是否显示
              position: "top", //显示在顶部
              textStyle: {
                color: "#FF9C40", //字体颜色
                fontSize: 12, //字体大小
                fontFamily: "Source Han Sans CN",
              },
              formatter: "{c}℃",
            },
          },
        },
        smooth: true,
      },
      {
        data: props.data.ydata1,
        type: "line",
        lineStyle: {
          color: "#7EC1FF",
        },
        itemStyle: {
          normal: {
            color: "#7EC1FF", //折点颜色
            label: {
              show: true, //是否显示
              position: "bottom",
              textStyle: {
                color: "#7EC1FF", //字体颜色
                fontSize: 12, //字体大小
                fontFamily: "Source Han Sans CN",
              },
              formatter: "{c}℃",
            },
          },
        },
        smooth: true,
      },
    ],
  };

  option && myChart.value.setOption(option);
}

function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
onMounted(() => {
  nextTick(() => {
    init();
    window.addEventListener("resize", resizeTheChart);
  });
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>