<!--  脑电评估检测指数分析看板 柱状图 -->
<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "indicatorsBarChart",
    required: true,
  },
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "400px",
  },
  // dataSets:[[50, 60, 55, 64.5],[55, 90, 70, 82.5]]
  dataSets: {
    type: Array,
    default: [] as Array<number>,
  },
});
/**
 * 配置项
 */
const options = {
  color: ["#f8b865", "#91cc75"],
  grid: {
    left: "10%",
    right: "8%",
    top: "8%",
    bottom: "15%",
  },
  tooltip: {
    show: true,
  },
  xAxis: [
    {
      type: "category",
      data: ["专注指数", "放松指数", "认知执行指数", "心情指数"],
      axisLabel: {
        fontSize: 14,
        color: "#00449b",
        interval: 0,
      },
      axisLine: {
        lineStyle: {
          color: "#4284f2",
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      show: true,
      min: 0,
      max: 100,
      offset: -5,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#4284f2",
          width: 1,
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "首次检测",
      type: "bar",
      data: props.dataSets?.[0],
      barGap: 0,
      barCategoryGap: "50%",
    },
    {
      name: "最近检测",
      type: "bar",
      data: props.dataSets?.[1],
    },
  ],
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(
    document.getElementById(<string>props.id) as HTMLDivElement
  );
  chart.setOption(options);
  // 大小自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
