<template>
<div class="content-R-big" ref="pipe"></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 pipe=ref()
const echartsData = reactive<EDataPerson>({
    pipe:{
        div:null,
        data:null,
        title:'',
        box:null
    },
})
const setData=()=>{
    echartsData.pipe!.div = pipe.value
    echartsData.pipe!.title = t('messages.PipelinePressure_Mpa')
    echartsData.pipe!.data={
      title:{
        text:echartsData.pipe!.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} mpa'
  },
  xAxis: {
    type: 'category',
    data: ['大件', '焊接', '精饰']
  },
  yAxis: {
    type: 'value',
    axisLabel:{
      formatter: '{value} mpa'
    }
  },
  series: [
    {
      data: [1.1, 1, 0.8],
      type: 'bar',
      label:{
        show:true,
        formatter: '{c} mpa'
      },
      markLine:{
        silent: true, //基线显示 隐藏
        symbol:'none',// 不显示箭头和圆点
        lineStyle:{
          color:'red'
        },
        data: [
                {
                  name: "上限",
                  yAxis: 1.2,
                  label:{
                    formatter:"上限压力：1.2mpa",
                    position: 'middle'
                  }
                }
          ],
      }
    }
  ]
};

change(echartsData.pipe)
}


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){
    pipe.value.style.height=height+'px'
    pipe.value.style.width=width+'px'
  if(echartsData.pipe.box){
    echartsData.pipe.box.resize()
  }
  
}
onMounted(() => {
    setData()
})

// return{setchartWH}
defineExpose({
    setchartWH,
})

</script>

<style module>

</style>
