screenFront/src/views/generalEnvironment/content/chart/humiture.vue

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

<script setup lang="ts">
import { EDataPerson, EDataPersonItem } from "@/type/environment";
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { getHumitureData } from "@/http/environment/index";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const { proxy } = getCurrentInstance() as any;

let humiture = ref();
const echartsData = reactive<EDataPerson>({
  humiture: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});
const setData = (value: any, type: number) => {
  //x轴数据
  let x = [];
  //y轴数据
  let y = { temp: [], humidity: [] };

  value.Humiture.forEach((res) => {
    x.push(res.name);
    y.temp.push(res.temp);
    y.humidity.push(res.humidity);
  });
  //防止数据先执行时获取不到div
  echartsData.humiture!.div = humiture.value;
  echartsData.humiture!.title = t('messages.TemperatureHumidity');
  echartsData.humiture!.data = {
    title: {
      text: echartsData.humiture!.title,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      // bottom: "3%",
      right:'50'
    },
    grid: {
      top: "8%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    color:["#4992FF","#7CFFB2","#FF6E76"],
    xAxis: {
      type: "category",
      data: x,
      axisLabel:{
        interval: 0
      }
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLabel: {
        formatter: "{value} (°C/%RH)",
      },
    },
    series: [
      {
        name: `${t('messages.TemperatureRange')}(°C)(${t('messages.fanwei')}：${value.bottom.temp}°C - ${value.top.temp}°C)`,
        type: "bar",
        data: y.temp,
        barWidth: '30%',
        itemStyle: {
          color: function (params) {
            var index_color = params.value;
            if (
              index_color <= value.bottom.temp ||
              index_color >= value.top.temp
            ) {
              return "#FF6E76";
            } else {
              return "#4992FF";
            }
          },
        },
        label: {
            formatter: "{c} °C",
            show: true,
            position: "top",
            textStyle: {
              color: "rgb(255,255,255,0.9)",
            },
        },
        markLine: {
          // 设置最大值和最小值
          silent: true, //基线显示 隐藏
          symbol: "none", // 不显示箭头和圆点
          data: [
            {
              name: t('messages.TemperatureRange'),
              yAxis: value.bottom.temp,
              label: {
                formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${value.bottom.temp} °C`,
                position: "middle",
              },
              lineStyle: {
                color: "yellow", // 这儿设置安全基线颜色
              },
            },
            {
              name: t('messages.TemperatureRange'),
              yAxis: value.top.temp,
              label: {
                formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_up')}：${value.top.temp} °C`,
                position: "middle",
              },
              lineStyle: {
                color: "yellow", // 这儿设置安全基线颜色
              },
            },
          ],
        },
      },
      {
        name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${value.bottom.humidity}%RH - ${value.top.humidity}%RH)`,
        type: "bar",
        data: y.humidity,
        barWidth: '30%',
        itemStyle: {
          color: function (params) {
            var index_color = params.value;

            if (
              index_color <= value.bottom.humidity ||
              index_color >= value.top.humidity
            ) {
              return "#FF6E76";
            } else {
              return "#7CFFB2";
            }
          },
        },
        label: {
            formatter: "{c} %RH",
            show: true,
            position: "top",
            textStyle: {
              color: "rgb(255,255,255,0.9)",
          },
        },
        markLine: {
          // 设置最大值和最小值
          silent: true, //基线显示 隐藏
          symbol: "none", // 不显示箭头和圆点
          data: [
            {
              name: "湿度",
              yAxis: value.bottom.humidity,
              label: {
                formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：` + value.bottom.humidity + "%RH",
                position: "middle",
              },
              lineStyle: {
                color: "red", // 这儿设置安全基线颜色
              },
            },
            {
              name: "湿度",
              yAxis: value.top.humidity,
              label: {
                formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：` + value.top.humidity + "%RH",
                position: "middle",
              },
              lineStyle: {
                color: "red", // 这儿设置安全基线颜色
              },
            },
          ],
        },
      },
      {
        name: t('messages.TemperatureHumidityexceeded'),
        type: "bar",
        color:'#FF6E76'
      }
    ],
  };

  if (type == 1) {
    
    change(echartsData.humiture);
  } else {
    updata(echartsData.humiture);
  }
};

const change = (item: EDataPersonItem) => {
  let Ebox = proxy.$echarts.init(item.div, "dark");
  Ebox.setOption(item.data);
  item.box = Ebox;
  
};
const updata = (item: EDataPersonItem) => {
  
  item.box.setOption(item.data);
};
function setchartWH(width: any, height: any) {
  //防止自适应先执行时获取不到div
  echartsData.humiture!.div = humiture.value;

  echartsData.humiture.div.style.height = height + "px";
  echartsData.humiture.div.style.width = width + "px";
  if (echartsData.humiture.box) {
    echartsData.humiture.box.resize();
  }
}

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

<style module>
.container {
}
</style>