screenFront/src/views/energyConsumeJixiefenchang/content/chart/gas.vue

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

<template>
    <div class="gasborder">
  <border4 ref="refborder4">
      <template v-slot>
        <!-- <h1>{{props.title}}</h1> -->
        <div ref="gas" ></div>
      </template>
  </border4>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
import 'echarts-liquidfill'
import border4 from "@/components/borderBox/border4.vue"
const { proxy } = getCurrentInstance() as any;
let props=defineProps<{
      title:string,
      }>()
let gas=ref()

let refborder4=ref()

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

const setData=(value:any)=>{
  console.log(value);
  
  echartsData.gas!.div=gas.value
  echartsData.gas!.title=props.title
  echartsData.gas!.data=({
          title: {
            // 标题
            text: echartsData.gas!.title,
            textStyle:{
          color:'#fff',
          fontSize:20
            }
          },
           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: '#186945',
          },
          {
            offset: 1,
            color: '#1b7a4f',
          },
        ],
        globalCoord: false,
      },
    ],
    data: [0.7,0.7], // data个数代表波浪数
    amplitude: 10, //振幅
    backgroundStyle: {
      borderWidth: 2, //边框大小
      borderColor:'rgba(8, 206, 120, 0.8)',//边框颜色
      color: 'rgba(8, 206, 120, 0.4)',
    },
    label: {
      normal: {
        textStyle: {
          fontSize: 24,
          fontWeight: 'bold',
          color: '#fff',
        },
        formatter:function(params){
          return value
        }
      },
      
    },
    outline: {
      borderDistance: 0,
      itemStyle: {
        borderWidth: 4,
        borderColor: 'transparent',
      },
    },
            }],
        })

change(echartsData.gas)
}

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

function setchartWH(width:any,height:any){
    // echartsData.water!.div=water.value
    gas.value.style.height=height-20+'px'
    gas.value.style.width=width+'px'
  
  refborder4.value.resetWH()
if(echartsData.gas.box){
  echartsData.gas.box.resize()
}

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

// return{setchartWH}
defineExpose({
  setchartWH,
  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;
}
</style>