<template>
  <div ref="chartDom" class="charts"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { barOption } from "./options/barOption.js";

const props = defineProps({
  styleName: {
    type: String,
    default: "styleName1",
  },
  xData: {
    type: Array,
    default: () => [],
  },
  yData: {
    type: Array,
    default: () => [],
  },
});

const chartDom = ref(null);
const myChart = ref(null);
const options = ref(null);

const initData = () => {
  if (props.styleName === "styleName2") {
    const arr = [];
    props.yData.forEach((item, index) => {
      arr.push({
        value:item.startNum,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: item.startColor,
            },
            {
              offset: 1,
              color: item.endColor,
            },
          ]),
        },
      });

    });
    barOption[props.styleName].series[0].data = arr
  } else {
    barOption[props.styleName].xAxis.data = props.xData;
    barOption[props.styleName].series[0].data = props.yData;
  }
  options.value = barOption[props.styleName];
  myChart.value.setOption(options.value);
};

// // 窗口大小变化时重置 ECharts 宽高
// window.addEventListener("resize", () => {
//   if (chartDom.value.clientWidth) {
//   console.log("chartDom.value", chartDom.value.clientWidth);
//     console.log("2222");
//     // 获取新的容器宽高
//     const newWidth = chartDom.value.clientWidth;
//     const newHeight = chartDom.value.clientHeight;

//     // 设置容器的宽高（可选，如果 CSS 已经控制宽度高度，可以跳过这一步）
//     chartDom.value.style.width = newWidth + "px";
//     chartDom.value.style.height = newHeight + "px";
//     console.log('chartDom.value.style.width',chartDom.value.style.width);
//     // 重置 ECharts 实例的宽高
//     myChart.value.resize();
//   }
// });

onMounted(() => {
  myChart.value = echarts.init(chartDom.value);
  initData();
});
</script>

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