<template>
 <div class="content-R-big" ref="noise"></div>
</template>

<script setup lang="ts">
import {EDataPerson,EDataPersonItem} from '@/type/environment'
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const { proxy } = getCurrentInstance() as any;

let noise=ref()
const echartsData = reactive<EDataPerson>({
    noise:{
        div:null,
        data:null,
        title:'',
        box:null
    },
})
const setData=()=>{
    echartsData.noise!.div = noise.value
    echartsData.noise!.title = t('messages.noise_DB')
    echartsData.noise!.data={
      title:{
        text:echartsData.noise!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  grid: {
    top:'8%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
      axis:'auto'
    },
      formatter: '{b} : {c} dB'
  },
  xAxis: {
    type: 'category',
    data: [t('messages.FuZhuangLegion'), t('messages.JiaFangLegion'), t('messages.QiCheLegion'), '电控', '精饰车间', '精加车间', '焊接车间', '大件车间', '机加车间', '配套中心']
  },
  yAxis: {
    type: 'value',
    axisLabel:{
      formatter: '{value} dB'
    }
  },
  series: [
    {
      data: [69.00, 56.00, 72.00, 80.00, 70.00, 69.00, 46.00, 56.00, 72.00, 80.00],
      type: 'bar',
      label:{
        show:true,
        formatter: '{c} dB'
      }
    }
  ]
};

change(echartsData.noise)
}


const change = (item:EDataPersonItem) => {
    console.log(item);
    
    let Ebox=proxy.$echarts.init(
    item.div,
    "dark"
  );
  Ebox.setOption(item.data);
  item.box = Ebox
};
function setchartWH(width:any,height:any){
    noise.value.style.height=height+'px'
    noise.value.style.width=width+'px'
  if(echartsData.noise.box){
    echartsData.noise.box.resize()
  }
  
}
onMounted(() => {
    setData()
})

// return{setchartWH}
defineExpose({
    setchartWH,
})
</script>

<style module>

</style>
