iot-ui-plus/src/views/data-visual/components/priTemp.vue

<template>
  <div class="priTempInfo">
    <div ref="priTempRef" class="priTempEchart" />
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { Ref } from 'vue';
import { getrealTime } from '@/api/dataVisual/index';
import useCounter from '@/store/modules/date';
const counterStore = useCounter();
const priTempRef: Ref<HTMLElement | any> = ref(null);
const deptId = ref('208');

const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    top: 10,
    right: 10,
    itemWidth: 11,
    itemHeight: 2,
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  },
  grid: {
    top: '20%',
    left: '0',
    right: '0',
    bottom: '0',
    containLabel: true
  },
  dataZoom: [
    {
      type: 'inside',
      show: false,
      startValue: 0,
      endValue: 10,
      height: '10',
      bottom: '0'
    }
  ],
  dataset: {
    source: [
      // ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'],
      // ['一网回水(低区)', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      // ['一网回水(中区)', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
      // ['一网回水(高区)', 3.2, 15, 8.0, 22.5, 30, 65, 182.8, 198.2, 50.2, 12.2, 8.0, 2.2],
      // ['一网供温(低区)', 2.0, 18, 12, 70.1, 30.9, 50.7, 80.2, 23.4, 23.0, 16.5, 12.0, 6.2]
    ]
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      show: true,
      color: '#D1E1FF'
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '',
      scale: true, //自适应
      nameTextStyle: {
        color: '#D1E1FF',
        fontSize: 12,
        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
      },
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLabel: {
        show: true,
        color: '#D1E1FF'
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          //分割线
          color: '#306269',
          width: 1,
          opacity: 0.2
        }
      }
    }
  ],
  series: [
    {
      type: 'bar',
      seriesLayoutBy: 'row',
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' ℃';
        }
      }
    },
    {
      type: 'bar',
      seriesLayoutBy: 'row',
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' ℃';
        }
      }
    },
    {
      type: 'bar',
      seriesLayoutBy: 'row',
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' ℃';
        }
      }
    },
    {
      type: 'line',
      seriesLayoutBy: 'row',
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' °C';
        }
      }
    }
  ]
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(priTempRef.value);
  chart.setOption(options);
  // getElect();

  // 大小自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });
});
watchEffect(() => {
  const dataStr = counterStore.deptIdStr;
  if (dataStr != '') {
    deptId.value = dataStr;
    getElect();
  }
});
function getElect() {
  //获取图表数据
  const params = {
    orgCode: deptId.value,
    viewType: 'heatSourceA'
  };
  getrealTime(params).then((res: any) => {
    const chart = echarts.init(priTempRef.value);
    if (res.code === 200 && Object.keys(res.data).length != 0) {
      options.dataset.source = res.data.source;
      options.yAxis[0].name = `℃`;
      chart.setOption(options);
    } else {
      chart.showLoading({
        text: '暂无数据',
        color: '#1A2537',
        textColor: '#d2def6',
        maskColor: '#1A2537',
        fontSize: 16,
        zlevel: 0
      });
    }
  });
}
</script>
<style lang="scss" scoped>
.priTempInfo {
  width: 100%;
  height: 318px;

  .priTempEchart {
    width: 100%;
    height: 318px;
  }
}
</style>