<template>
  <div class="comom-cnt" v-loading="loading">
   <LineEcharts echartsId="qbsbEcharts111" :data="dataList"></LineEcharts>
  </div>
</template>

<script setup>
import { qcckPost } from "@/api/qcckApi.js";
import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
import { reactive, onMounted,ref } from 'vue';

const dataList = reactive({
  xData:[],
  color:['#0386FB','#00FFFF'],
  labelColor:'#333',
  list:[
    {label:'',val:[0,0,10,0,0,0,0]},
  ]
});

const loading=ref(false)
const searchData = ref({})
onMounted(()=>{
  getDate()
})

const init = (val) =>{
  searchData.value = val;
  getDate()
}

function getDate (){
  let params = { ...searchData.value }
  delete params.dateRange;
  loading.value = true;
  qcckPost(params,'/mosty-gsxt/qbcj/getXscjTjByXslx').then(res=>{
    loading.value = false;
    let arr = res || [];
    dataList.xData = arr.map(v=>{return v.zdmc});
    dataList.list[0].val =  arr.map(v=>{return v.count});
  }).catch(()=>{
    loading.value = false;
  })
}
defineExpose({init})



</script>


<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.comom-cnt{
    width: 100%;
    height: 100%;
}

</style>