<template>
  <div ref="bar" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { defineProps, watch, ref, nextTick } from "vue";
import { chartAdaptation } from "@/utils/tools";
const props = defineProps({
  barNum: {
    type: Array,
    default: []
  },
  barTitle: {
    type: Array,
    default: []
  },
  loadingshow: {
    type: Boolean,
    default: false
  },
  ids: {
    type: String,
    default: "binbar"
  }
});
const bar = ref()

const getBin = (data, twodata) => {
  var myChart = echarts.init(bar.value);
  var option;
  let series = [];
  twodata.map((item) => {
    let obj = {
      name: item.name,
      type: "bar",
      // stack: "As",
      barWidth: "15%",
      barGap: 0,
      emphasis: {
        focus: "series"
      },
      itemStyle: {
        // 自定义颜色
        normal: {
          color: item.color,
          barBorderRadius: [8, 8, 0, 0]
        }
      },
      data: item.data
    };
    series.push(obj);
  });
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      left: "3%"
    },
    grid: {
      left: "1%",
      right: "4%",
      bottom: "5%",
      width: "95%", // 宽度
      height: "79%", // 高度
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: data
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: series
  };

  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};
watch(
  () => props.barNum,
  (val) => {
    if (val) {
      nextTick(() => {
        getBin(props.barTitle, props.barNum);
      })
    }
  }, { deep: true }
)
</script>
<style scoped></style>