<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,
  },
  //数据
  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: "",
  },
});

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));
  var salvProName = props.echartData.yAxisData;
  var salvProValue = props.echartData.xAxisData;
  var salvProMax = []; //背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(salvProValue[0]);
  }
  let option = {
    backgroundColor: "",
    grid: {
      left: "2%",
      right: "2%",
      bottom: "2%",
      top: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "none",
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          textStyle: {
            color: "#545E75", //字体颜色
            fontSize: 16, //字体大小
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          formatter: `{value}次`, // 在每个x轴坐标都添加了单位
          textStyle: {
            color: "#FF7606", //字体颜色
            fontSize: 16, //字体大小
          },
        },
        data: salvProValue,
      },
    ],
    series: [
      {
        name: "巡查次数",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            borderRadius: 30,
            color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgb(57,89,255,1)",
              },
              {
                offset: 1,
                color: "rgb(46,200,207,1)",
              },
            ]),
          },
        },
        barWidth: 20,
        data: salvProValue,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 20,
        barGap: "-100%",
        data: salvProMax,
        itemStyle: {
          normal: {
            color: "rgba(245,246,252,1)",
            borderRadius: 30,
          },
        },
      },
    ],
  };
  // 绘制图表
  myChart.value.setOption(option);
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>