<template>
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
import { nowSize } from "@/utils/util.js";
import moment from "moment";
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
});

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();
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        // label: {
        //   show: true,
        // }
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].value + "km²";
      },
    },
    grid: {
      top: nowSize(14, 1920),
      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
      left: nowSize(100, 1920),
      right: nowSize(20, 1920),
    },
    xAxis: {
      type: "value",
      axisLine: {
        show: false, //隐藏X轴轴线
        lineStyle: {
          color: "rgba(44, 110, 189, 1)",
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
        lineStyle: {
          color: "rgba(44, 110, 189, 1)",
        },
      },
      axisLabel: {
        show: true,
        color: "#39F7FF",
        fontSize: nowSize(14, 1920),
      },
      splitLine: {
        //网格线
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.2)", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
    },
    yAxis: {
      type: "category",
      data: props.echartData.xData,
      name: "面积/km²",
      nameLocation: "start",
      nameTextStyle: {
        color: "#39F7FF",
        fontSize: nowSize(14, 1920),
        padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
      },
      axisTick: {
        show: false, //隐藏X轴刻度
        lineStyle: {
          color: "rgba(44, 110, 189, 1)",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "rgba(255, 255, 255, 1)",
        fontSize: nowSize(13, 1920),
      },
      // splitArea: {
      //   show: true,
      //   areaStyle: {
      //     color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
      //   }
      // }
    },
    series: [
      {
        type: "bar",
        name: "面积/km²",
        data: props.echartData.data,
        barWidth: nowSize(10, 1920),
        zlevel: 1,
        itemStyle: {
          borderRadius: nowSize(5, 1920),
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 0,
              color: "rgba(0, 167, 245,1)",
            },
            {
              offset: 1,
              color: "rgba(0, 238, 253,1)",
            },
          ]),
        },
      },
      {
        name: "背景",
        type: "bar",
        barWidth: nowSize(10, 1920),
        barGap: "-100%",
        data: props.echartData.num,
        itemStyle: {
          borderRadius: nowSize(5, 1920),
          color: "rgba(77, 149, 217, 0.15)",
        },
      },
    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>

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