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

<script setup>

import * as echarts from "echarts";
import { ref, defineProps, reactive, onMounted, nextTick, watchEffect } from "vue";
import { chartAdaptation } from "@/utils/tools";
import emitter from "@/utils/eventBus.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
//   import { deepClone } from "@/utils/tools";

const binTab = ref(null)
const binshow = ref(false);

const props = defineProps({
  xAxisdata: {
    type: Array,
    default: []
  },
  pieNum: {
    type: Array,
    default: []
  },
  ids: {
    type: String,
    default: ''
  }
});


onMounted(() => {
  binshow.value = true
  const chartDom = document.getElementById(props.ids);
  const myChart = echarts.init(chartDom);
  let option;
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7955'
        }
      }
    },
    legend: {
      data: ['计划内', '实施(计划内和计划外)']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: props.xAxisdata
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: props.pieNum
  }
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
  window.addEventListener('resize', () => {
    myChart.resize()
  })

})


</script>
<style scoped></style>