<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
const emit = defineEmits()
const id = guid();
const myChart = shallowRef("");
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
  //标题
  title: {
    type: String,
    default: "",
  },
  //X轴type
  xAxisType: {
    type: String,
    default: "category",
  },
  //Y轴type
  yAxisType: {
    type: String,
    default: "value",
  },
  //是否堆叠
  stack: {
    type: String,
    default: "",
  },
  //图列的排列方式
  legend: {
    type: Object,
    default: {
      top: "2%",
      orient: "horizontal", //horizontal
      left: "center", //left ,center
    },
  },
  //Y轴标题名称
  yAxisName: {
    type: String,
    default: "",
  },
  //X轴标题
  xAxisName: {
    type: String,
    default: "",
  },
  grid: {
    type: Object,
    default: {
      left: "3%",
      right: "7%",
      top: "25%",
      bottom: "3%",
      containLabel: true,
    }
  },
  tooltipFormatter: {
    type: Function,
    default: null
  },
  event: {
    type: String,
    default: ''
  }
});

watch(
  () => props.refresh,
  (value) => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
//初始化
function intChart() {
  const dom = document.getElementById(id)
  if(!dom) return
  if(dom.clientWidth === 0 || dom.clientHeight === 0) return
  myChart.value = proxy.echarts.init(dom);
  // 绘制图表
  myChart.value.setOption({
    title: { text: props.title },
    tooltip: {
      trigger: "axis",
      showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: props.tooltipFormatter
    },
    grid: props.grid,
    legend: props.legend,
    xAxis: {
      type: props.xAxisType,
      boundaryGap: [0, 0.01],
      data: props.echartData.xAxisData,
      name: props.xAxisName,
      axisLabel: {
        color: "#222"
      },
    },
    yAxis: {
      type: props.yAxisType,
      data: props.echartData.yAxisData,
      name: props.yAxisName,
      minInterval: 1,
      nameTextStyle: {
        color: "#222",
        fontSize: 12
      },
      axisLabel: {
        color: "#222", //字体颜色
        fontSize: 12, //字体大小
      },
      ...(props.echartData.yAxisOption || {})
    },
    series: props.echartData.seriesData,
  });
  // 注册事件
  if(!props.event) return
  myChart.value.on(props.event, function(params){
    emit(`${props.event}-callback`, {
      chart: myChart.value,
      params
    })
  })
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
</script>