<template>
  <div :id="props.ids" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { defineProps, watch } 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"
  }
});
watch(
  () => props.loadingshow,
  (val) => {
    if (val) {
      getBin(props.barTitle, props.barNum);
    }
  }
)
const getBin = (data, twodata) => {
  const chartDom = document.getElementById(props.ids);
  var myChart = echarts.init(chartDom);
  var option;
  let series = [];
  twodata.map((item) => {
    let obj = {
      name: item.name,
      type: "bar",
      stack: "As",
      emphasis: {
        focus: "series"
      },
      itemStyle: {
        // 自定义颜色
        normal: { color: item.color }
      },
      data: item.data
    };
    series.push(obj);
  });
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      textStyle: {
        color: "#319177",
        fontWeight: 600,
        fontSize: 16
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      width: "95%", // 宽度
      height: "79%", // 高度
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: data
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: series
  };

  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};
</script>
<style scoped></style>