<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: "",
  },
  //数据
  echartData: {
    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({
    tooltip: {
      trigger: "axis",
      position: function (pt) {
        return [pt[0], "10%"];
      },
    },
    title: {
      left: "left",
      text: props.title,
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: "#545E75", //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: "3%",
      right: "7%",
      top: "15%",
      bottom: "15%",
      containLabel: true,
    },
    toolbox: {
      //   feature: {
      //     dataZoom: {
      //       yAxisIndex: "none",
      //     },
      //     restore: {},
      //     saveAsImage: {},
      //   },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: props.echartData.xAxisData,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "100%"],
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 10,
      },
      {
        start: 0,
        end: 10,
      },
    ],
    series: [
      {
        name: props.echartData.seriesName,
        type: "line",
        symbol: "none",
        sampling: "lttb",
        itemStyle: {
          color: "rgb(255, 70, 131)",
        },
        areaStyle: {
          color: proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 158, 68)",
            },
            {
              offset: 1,
              color: "rgb(255, 70, 131)",
            },
          ]),
        },
        data: props.echartData.seriesData,
      },
    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
</script>