mky-vent-base/src/views/vent/monitorManager/mainFanMonitor/fanEchrats.vue

<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, PropType, reactive, Ref, ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import type { EChartsOption } from 'echarts';
  export default defineComponent({
    name: 'FanEcharts',
    props: {
      chartData: {
        type: Object,
        required: true,
      },
      xMin: {
        type: Number,
        default: 0,
      },
      xMax: {
        type: Number,
        default: 400,
      },
      width: {
        type: String as PropType<string>,
        default: '500px',
      },
      height: {
        type: String as PropType<string>,
        default: '400px',
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
      const dataX = ref([1, 2, 3, 4, 5, 6]);
      const dataY1 = ref([10, 43, 33, 13, 5, 34]);
      const dataY2 = ref([12, 54, 34, 65, 23, 43]);
      const dataY3 = ref([]);
      const option = reactive<EChartsOption>({
        color: ['#0083C4', '#50006A', '#ff0000', '#EE6666'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333',
            },
          },
          formatter: function (params: any, ticket, callback) {
            let res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>';
            res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>';
            res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
            return res;
          },
          // trigger: 'item',
        },
        grid: {
          left: 70,
          right: 60,
          bottom: 50,
          top: 70,
        },
        xAxis: [
          {
            name: '风量(m³/min)',
            nameGap: 25,
            nameRotate: -45,
            type: 'value',
            // data: dataX.value,
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: '14px',
              color: '#000000',
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#000000',
              },
            },
            splitLine: {
              show: false, // 网格线
            },
            axisLabel: {
              fontWeight: 'bold',
              fontSize: '14px',
              color: '#000000',
            },

            min: props.xMin * 60,
            max: props.xMax * 60,
          },
          {
            show: false,
            nameGap: 15,
            nameRotate: -45,
            type: 'value',
            // data: dataX.value,
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: '14px',
              color: '#000000',
            },
            splitLine: {
              show: true, // 网格线
              lineStyle: {
                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000000',
              },
            },
            axisLabel: {
              show: true,
              fontWeight: 'bold',
              fontSize: '14px',
              color: '#000000',
            },
            min: props.xMin,
            max: props.xMax,
          },
        ],
        legend: {
          data: ['阻力(Nu)', '负压(Pa)'],
          top: '0px',
          textStyle: {
            color: '#000000',
            fontWeight: 'bold',
            fontSize: '14px',
          },
        },
        yAxis: [
          {
            min: 0,
            type: 'value',
            name: '负压(Pa)',
            nameGap: 30,
            splitNumber: 5,
            position: 'left',
            alignTicks: true,
            splitLine: {
              lineStyle: {
                color: '#00000022',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000000',
              },
            },
            axisLabel: {
              formatter: '{value}',
              fontWeight: 'bold',
              fontSize: '14px',
            },
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: '14px',
            },
          },
        ],
        series: [
          {
            name: '阻力(Nu)',
            type: 'line',
            data: dataY1.value,
            smooth: true,
            animationDuration: 1000,
            showSymbol: false,
            xAxisIndex: 1,
            yAxisIndex: 0,
          },
          {
            name: '负压(Pa)',
            type: 'line',
            data: dataY2.value,
            smooth: true,
            animationDuration: 1000,
            showSymbol: false,
            xAxisIndex: 1,
            yAxisIndex: 0,
          },
          {
            name: '',
            yAxisIndex: 0,
            xAxisIndex: 1,
            type: 'line',
            smooth: true,
            animationDuration: 1000,
            symbolSize: 10,
            data: dataY3.value,
          },
        ],
      });

      watchEffect(() => {
        if (props.chartData && props.chartData.dqPa && props.chartData.fanM3) {
          getEchartsData();
          option.series[0].data = dataY1.value;
          option.series[1].data = dataY2.value;
          option.series[2].data = dataY3.value;
          setOptions(option, false);
        }
      });

      function getEchartsData(param = { dataA: -0.056, dataB: 3.6491, dataC: 4364.4, dataQ: 205.97, dataH: 2740.6 }) {
        const Q1 = props.chartData.fanM3;
        const H1 = props.chartData.dqPa;

        const q = Q1 - param.dataQ;
        const h = H1 - param.dataH;

        dataY1.value = [];
        dataY2.value = [];
        dataY3.value = [];
        for (let i = 0; i <= 400; i++) {
          const x = i;
          const y = (H1 / Q1 / Q1) * x * x;
          dataY1.value.push([x, y]);
          if (i >= 30) {
            const y4 = param.dataA * (x - q) * (x - q) + param.dataB * (x - q) + param.dataC + h;
            dataY2.value.push([x, y4]);
          }
        }
        dataY3.value.push([Q1, H1]);
        // dispatchAction(Q1)
      }

      // const dispatchAction = (dataIndex) => {
      //   getInstance()
      // }

      onMounted(() => {
        setOptions(option, false);
      });

      return { chartRef };
    },
  });
</script>
<style></style>