screenFront/src/views/Temp/zaideng/chart/humidity.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\humidity.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-10 13:27:36
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登高软件}, All Rights Reserved.
-->

<template>
  <div class="content-small" ref="humiture"></div>
</template>

<script setup lang="ts">
import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
import { Offsite } from "@/store/module/offsite";
const { proxy } = getCurrentInstance() as any;

let store = Offsite();
let props = defineProps<{
  name: String;
  title: any;
}>();
let humiture = ref();
const echartsData = reactive<EDataPerson>({
  humiture: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});


function calculateRatio(min, max, limit) {
    if (max === min) {
        return 0; // 处理max等于min的情况，返回0
    }
    let ratio = (limit - min) / (max - min);
    ratio = Math.max(0, Math.min(1, ratio)); // 限制比例在0到1之间
    ratio = Math.round(ratio * 100) / 100; // 四舍五入到两位小数
    return ratio;
}


/**
 * @函数功能:
 * @param {*} value 需要设置的数据
 * @param {*} type 1为创建 2为更新
 * @出口参数:
 * @函数备注:
 */
const setData = (value: any) => {
  echartsData.humiture!.div = humiture.value;
  echartsData.humiture!.title = props.title;
  echartsData.humiture!.data = {
    title: {
      text: props.title,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      top: 5
    },
    grid: {
      // 让图表占满容器
      top: "0px",
      left: "0px",
      right: "0px",
      bottom: "0px",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "90%"],
        startAngle: 190,
        endAngle: -10,
        radius: "30%",
        min: -30,
        max: 70,
        splitNumber: 10,
        progress: {
          show: false,
          width: 5
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        //刻度轴宽
        axisLine: {
          lineStyle: {
            width: 5,
            color: [
              [calculateRatio(-30,70,store.limit.temp_bottom), '#FF6E76'],
              [calculateRatio(-30,70,store.limit.temp_top), '#7CFFB2'],
              [1, '#FF6E76']
            ]
          }
        },
        //刻度线
        axisTick: {
          show: false,
          distance: -5,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        //刻度线
        splitLine: {
          distance: -10,
          length: 3,
          lineStyle: {
            width: 3,
            color: '#999'
          }
        },
        //表刻度值
        axisLabel: {
          distance: -20,
          color: '#999',
          fontSize: 12
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          // width: '10%',
          // lineHeight: 5,
          // borderRadius: 8,
          // offsetCenter: [0, '-15%'],
          fontSize: 12,
          // fontWeight: 'bolder',
          formatter: '{value} °C',
          color: 'inherit'
        },
        data: [
          {
            value: value.c
          }
        ]
      },
      {
        type: "gauge",
        center: ["50%", "55%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        progress: {
          show: false,
          width: 5
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        //刻度轴宽
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [calculateRatio(0,100,store.limit.humidity_bottom), '#FF6E76'],
              [calculateRatio(0,100,store.limit.humidity_top), '#7CFFB2'],
              [1, '#FF6E76']
            ]
          }
        },
        //刻度线
        axisTick: {
          distance: 0,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        //刻度线
        splitLine: {
          distance: 5,
          length: 3,
          lineStyle: {
            width: 3,
            color: '#999'
          }
        },
        axisLabel: {
          distance: -30,
          color: '#999',
          fontSize: 20
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          offsetCenter: [0, '15%'],
          fontSize: 15,
          formatter: '{value} %RH',
          color: 'inherit'
        },
        data: [
          {
            value: value.h
          }
        ]
      },
    ],
  };
  change(echartsData.humiture);
};

const change = (item: EDataPersonItem) => {
  let Ebox;
  //判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
  if (!item.box) {
    Ebox = markRaw(proxy.$echarts.init(item.div, "dark"))
  } else {
    Ebox = item.box;
  }
  //将拿到的dom设置数据源
  Ebox.setOption(item.data);
  //保存新设置的dom
  item.box = Ebox;
};
const updata = (item: EDataPersonItem) => {
  item.box.setOption(item.data);
};
function setchartWH(width: any, height: any) {
  echartsData.humiture!.div = humiture.value;
  humiture.value.style.height = height + "px";
  humiture.value.style.width = width + "px";
  if (echartsData.humiture.box) {
    echartsData.humiture.box.resize();
  }
}
onMounted(() => {
  // setData()
});

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

<style scope>
.content-small {
  margin-right: 3px;
}
</style>