<template>
  <div class="SectorDiagram" :id="echId"></div>
</template>

<script setup>
import {
  ref,
  defineProps,
  defineExpose,
  defineEmits,
  markRaw,
  onMounted,
  onUnmounted
} from "vue";

import * as echarts from "echarts";
const props = defineProps({
  datas: Array, //数据
  echId: String //图表ID
});
const myChart = ref(null);
const emit = defineEmits(["chooseDep"]);
onMounted(() => {
  //图表点击事件
  myChart.value = markRaw(echarts.init(document.getElementById(props.echId)));
  myChart.value.on("click", (params) => {
    emit("chooseDep", params.name);
  });
  // 监听窗口变化 - 多个图表同时刷新
  window.addEventListener("resize", () => {
    myChart.value.resize();
  });
});
onUnmounted(() => {
  window.removeEventListener("resize", myChart.value.resize(), false);
});
function drawLine(val) {
  let title = val.map((v) => {
    return v.orgName;
  });
  let yqdList = val.map((v) => {
    return v.yqd;
  });
  let wqdList = val.map((v) => {
    return v.wqd;
  });
  // 图表配置
  let option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "9%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: title,
        axisLabel: {
          fontSize: 12,
          color: "#d1f9fb",
          rotate: 20 // 文本旋转角度
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            width: 1,
            type: "solid"
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            width: 1,
            type: "solid"
          }
        }
      }
    ],
    series: [
      {
        name: "已签订",
        type: "bar",
        stack: "Search Engine",
        barWidth: "40",
        emphasis: {
          focus: "series"
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" }
          ])
        },
        data: yqdList
      },
      {
        name: "未签订",
        type: "bar",
        barWidth: "40",
        stack: "Search Engine",
        emphasis: {
          focus: "series"
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#b6ee9d" },
            { offset: 0.5, color: "#abd499" },
            { offset: 1, color: "#91cc75" }
          ])
        },
        data: wqdList
      }
    ]
  };
  myChart.value.setOption(option);
}

defineExpose({ drawLine });
</script>

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