<template>
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="twoLine">
import { guid } from "@/utils/ruoyi";

const { proxy } = getCurrentInstance();
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {
      series: [],
    },
  },
  title: {
    type: String,
    default: "",
  },
});
// console.log('-------------------', props.title);

const id = guid();
const myChart = shallowRef("");

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.clear();
  // 绘制图表
  if (!props.echartData.series.length) return;
  let seriesOption = [];
  let colorOption = [
    ["rgba(49, 119, 255, 1)", "rgba(49, 119, 255, 0.1)"],
    ["rgba(19,229,154, 1)", "rgba(19,229,154, 0.1)"],
  ];
  props.echartData.series.forEach((item, index) => {
    let obj = {};
    obj.name = item.name;
    obj.type = "line";
    obj.data = item.tabY;
    obj.showAllSymbol = true; //显示所有图形。
    // obj.smooth = true;
    obj.smooth = false;
    obj.symbol = "circle"; //标记的图形为实心圆
    obj.symbolSize = 6; //标记的大小
    obj.lineStyle = {
      color: colorOption[index][0],
    };
    obj.tooltip = {
      valueFormatter: function (value) {
        return value + (props.echartData.unit || "");
      },
    };
    obj.areaStyle = {
      color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: colorOption[index][0],
        },
        {
          offset: 1,
          color: colorOption[index][1],
        },
      ]),
    };
    obj.itemStyle = {
      //折线拐点标志的样式
      color: colorOption[index][0],
    };

    seriesOption.push(obj);
  });

  myChart.value.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
        },
      },
    },
    grid: {
      top: "22%",
      bottom: "15%", //也可设置left和right设置距离来控制图表的大小
      left: "10%",
      right: "5%",
    },
    legend: {
      show: true,
      // itemWidth: 20,
      // itemHeight: 8,
      itemGap: 30,
      top: 6,
      icon: "rect", // 设置图例图标为矩形
      itemWidth: 10, // 图例图标宽度
      itemHeight: 10, // 图例图标高度
      selectedMode: false,
      data: ["南向北", "北向南"],
      textStyle: {
        color: "#ebfeff",
        fontSize: 16,
      },
    },
    xAxis: {
      data: props.echartData.tabX,
      // data: ["9/1", "9/2","9/3", "9/4","9/5","9/6","9/7"],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#357da7",
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
        lineStyle: {
          // color: 'rgba(171, 171, 171, 1)',
        },
      },
      axisLabel: {
        show: true,
        color: "#ebfeff",
        // interval: 0,
        fontSize: 16,
        // formatter: function (value) {
        //   // return value.split(' ').join('\n');
        //   return value.slice(5);
        // },
      },
      // splitLine: {    //网格线
      //   lineStyle: {
      //     type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
      //   },
      //   show: true //隐藏或显示
      // },
    },
    yAxis: {
      type: "value",
      name: props.echartData.unit || "",
      nameLocation: "end", // 将名称靠顶部
      // nameRotate: 0, // 名称水平显示
      nameTextStyle: {
        color: "#ebfeff",
        fontSize: 16,
        padding: [0, 20, -2, 0],
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "#ebfeff",
        fontSize: 16,
      },
      splitLine: {
        //网格线
        lineStyle: {
          type: "solid",
          color: "#357da7", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
    },
    series: seriesOption,
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  height: 100%;
}
</style>