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

<script setup>

import * as echarts from "echarts";
import { ref, defineProps, watch, 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({
  pieNum: {
    type: Array,
    default: []
  },
   pieTitle: {
    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: {
        // 触发类型，默认数据触发，可选为：'item' | 'axis'
        trigger: 'axis',
            formatter: function (params) {
        // params 是一个数组，数组中包含每个系列的数据信息
        var res =  params[0].name + '<br/>'+params[0].value+'%' ;
        return res;
    }
    },
    grid:{
      top:'10%',
height:150
},
     xAxis: {
    type: 'category',
    data: props.pieTitle
  },
  yAxis: {
    type: 'value',
        axisLabel: {  
                    show: true,  
                 interval: 'auto',  
                 formatter: '{value} %'  
                  },  
               show: true  
  },
      label: {
                 show: true,
                 position: 'top',
                formatter: '{c}%'　//在柱状图的顶部显示出某个东西和这个东西的百分比值
                    },
  series: [
    {
      data: props.pieNum,
      type: 'bar',
       barWidth: '30%',
    }
  ]
  }
    
 
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
  window.addEventListener('resize', () => {
    myChart.resize()
  })

})


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