<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));
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "axis",
      confine: true, //是否将 tooltip 框限制在图表的区域内
    },
    title: {
      left: "left",
      text: "",
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: "#545E75", //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: [
      {
        left: 60,
        right: 50,
        height: "35%",
      },
      {
        left: 60,
        right: 50,
        top: "55%",
        height: "35%",
      },
    ],
    toolbox: {
      feature: {
        // dataZoom: {
        //   yAxisIndex: "none",
        // },
        // restore: {},
        // saveAsImage: {},
      },
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: "all",
        },
      ],
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: true },
        data: props.echartData.xAxisData,
        show: false,
      },
      {
        gridIndex: 1,
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: true },
        data: props.echartData.xAxisData,
        position: "bottom",
      },
    ],
    yAxis: [
      {
        name: props.echartData.yAxisName1,
        type: "value",
        nameLocation: "end", // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: "#545E75", //字体颜色
          fontSize: 16, //字体大小
          align: "left", // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontWeight: "bold",
        },
      },
      {
        gridIndex: 1,
        name: props.echartData.yAxisName2,
        type: "value",
        nameLocation: "end", // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: "#545E75", //字体颜色
          fontSize: 16, //字体大小
          align: "left", // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontWeight: "bold",
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
      {
        type: "inside",
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
    ],
    series: [
      {
        name: "修复前:" + props.echartData.seriesName,
        type: "line",
        symbolSize: 8,
        data: props.echartData.seriesData1,
        itemStyle: {
          color: "rgb(255, 70, 131)",
        },
        areaStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 158, 68)",
            },
            {
              offset: 1,
              color: "rgb(255, 70, 131)",
            },
          ]),
        },
      },
      {
        name: "修复后:" + props.echartData.seriesName,
        type: "line",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbolSize: 8,
        data: props.echartData.seriesData2,
        itemStyle: {
          color: "rgb(4, 192, 144)",
        },
        areaStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(4, 192, 144)",
            },
            {
              offset: 1,
              color: "rgb(4, 205, 144)",
            },
          ]),
        },
      },
    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>