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

<script setup>
import * as echarts from "echarts";
const status = ref(true)

import {
  ref,
  defineProps,
  reactive,
  onMounted,
  watch,
  defineExpose,
  nextTick,
} from "vue";
import { chartAdaptation } from "@/utils/tools";
//   import { deepClone } from "@/utils/tools";
const props = defineProps({
  barNum: {
    type: Array,
    default: []
  },
  barTitle: {
    type: Array,
    default: []
  },
  series: {
    type: Array,
    default: []
  },
  loadingshow: {
    type: Boolean,
    default: false
  },
  ids: {
    type: String,
    default: "binbar"
  },
  type: {
    type: String,
    default: "bar"
  },
  binTitle: {
    type: String,
    default: ""
  }
});
onMounted(() => {
  nextTick(() => {
    if (props.loadingshow) {
      getBin(props.binTitle, props.barTitle, props.series, props.barNum);
    }
  });
});
const getBin = (binTitle, data, series, twodata) => {
  const chartDom = document.getElementById(props.ids);
  var myChart = echarts.init(chartDom);
  var option;

  // series.push(obj);
  series = twodata.map((it) => {
    return {
      'name': it.name, 'type': props.type, 'stack': 'As', 'emphasis': { 'focus': "series" }, 'itemStyle': {
        'normal': { 'color': it.color }, 'data': it.data
      }, data: it.data
    }
  });
  option = {
    title: {
      text: binTitle
    },
    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);
};
// defineExpose({ getBin });
</script>
<style scoped>
::v-deep canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>
