<!--
 * @FilePath: \code\gitscreenFront\src\views\generalEnvironmentMechanical\components\gas.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-14 13:24:12
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
        <!-- <h1>{{props.title}}</h1> -->
        <div ref="gas" class="gas-echarts-class"></div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, onUpdated, reactive, ref, watch} from "vue"
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
import 'echarts-liquidfill'
const { proxy } = getCurrentInstance() as any;
let props=defineProps<{
      title:string,
      value:any;
      color:{
        step0:string,
        step1:string,
        border:string
        color:string
      };
      }>()
let gas=ref()

let refborder4=ref()

const echartsData = reactive<EDataPerson>({
    gas:{
      div:null,
      data:null,
      title:'',
      box:null
  },
})

const setData=()=>{
  
  echartsData.gas!.div=gas.value
  echartsData.gas!.title=props.title
  echartsData.gas!.data=({
          title: {
            // 标题
            text: echartsData.gas!.title,
            textStyle:{
          color:'#fff',
          fontSize:20
            },
            top:'2%'
          },
           series: [{
    type: 'liquidFill',
    radius: '80%', //水球大小
    shape:'rect',
    center: ['50%', '50%'],
    waveAnimation: true,
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: props.color.step0,
          },
          {
            offset: 1,
            color: props.color.step1,
          },
        ],
        globalCoord: false,
      },
    ],
    data: [0.7,0.7], // data个数代表波浪数
    amplitude: 10, //振幅
    backgroundStyle: {
      borderWidth: 2, //边框大小
      borderColor:props.color.border,//边框颜色
      color: props.color.color, //背景色
    },
    label: {
      normal: {
        textStyle: {
          fontSize: 24,
          fontWeight: 'bold',
          color: '#fff',
        },
        formatter:function(params){
          return props.value
        }
      },
      
    },
    outline: {
      borderDistance: 0,
      itemStyle: {
        borderWidth: 4,
        borderColor: 'transparent',
      },
    },
            }],
        })

change(echartsData.gas)
}

const change = (item:EDataPersonItem) => {
  let Ebox;
  if (!item.box) {
    Ebox = proxy.$echarts.init(item.div, "dark");
  } else {
    Ebox = item.box;
  }
  Ebox.setOption(item.data);
  item.box = Ebox;
};

onUpdated(() => {  
  setData()
})
// watch(() => props.value, (val) => {
//   console.log(val);
  
//   setData()
// }, { deep: true })

onMounted(() => {
  setData()
})


</script>

<style scoped>
.gasBox{
    /* border-radius: 50%; */
    background-color: #8CE78D;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    font-size: 20px;
}
.gasborder{
    position: relative;
}
.gasborder h1{
    position: absolute;
    top: 20px;
    left:20px;
    color: #fff;
}
.gas-echarts-class{
  width: 100%;
  height: 100%;
}
</style>
