更新

src/views/vent/home/clique/components/EchartLineCharacter3.vue

@@ -0,0 +1,334 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div :id="setid" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+   import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  // import Utils from '@/utils/utils'
+  // const echarts = require('echarts')
+  import * as echarts from 'echarts';
+
+  let props = defineProps({
+    setid: String,
+    });
+
+    let myChart=ref<any>(null)
+       let title1=ref<any>('')
+        let title2=ref('')
+        let legend=reactive(['风阻', '负压'])
+        let min= 0
+        let yname=ref('负压(Pa)')
+        let xname=ref('风量\r\n(m³/min)\r\n')
+        let ymax=ref( 3000)
+        let ymax2=ref(200)
+        let xMax=ref(300)
+        let xMin=ref(0)
+        let xdata1=reactive([])
+        let xdata2=reactive([])
+        let xdata3=reactive([])
+        let xdata4=reactive([])
+        let xdata5=reactive([])
+        let xdata6=reactive([])
+        let ynametextcolor=ref( '#3df6ff')
+        let linecolor=ref( '#0092d5')
+        let gridlinecolor=ref('#006c9d')
+        let textcolor=ref('#ffffff')
+        let myWidth=ref( window.innerWidth - 500 + 'px')
+        let padding=reactive( ['auto', 'auto', '40', '50'])
+
+
+            // 风速曲线图各种参数设置
+     function optionFun() {
+        var option = {
+          title: {
+            textStyle: {
+              color: textcolor.value,
+              fontSize: 14 // 字体颜色
+            },
+            text:title.value
+          },
+          grid: {
+            top: '20%',
+            left: '3%',
+            right: '16%',
+            bottom: '5%',
+            containLabel: true
+          },
+          legend: {
+            // x:'right',
+            top: '1%',
+            textStyle: {
+              color: '#ffffff',
+              fontSize: 14// 字体颜色
+            },
+            data: legend
+          },
+          tooltip: {
+            backgroundColor: 'rgba(0,0,0,0.8)',
+            textStyle: {
+              color: textcolor.value,
+              fontSize: 14 // 字体颜色
+            },
+            formatter: function (params, ticket, callback) {
+              console.log(params,'params1')
+              // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
+              // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
+              var res = '风量' + ' : ' + params.data[0]*60 + '(m³/min)<br/>'
+              res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>'
+              res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
+              // lxh
+              // var res = '风量' + ' : ' + 13600 + '(m³/min)<br/>'
+              // res = res + '&emsp;&emsp;&emsp;' + (13600 / 60).toFixed(2) + '(m³/s)<br/>'
+              // res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
+
+              return res
+            },
+            trigger: 'item'
+          },
+          color: ['#00bb00',
+            '#ffbb00',
+            '#ff0000',
+            '#0000ff'],
+          xAxis: [{
+            name: xname.value,
+            nameTextStyle: {
+              color: ynametextcolor.value,
+              fontSize: 14
+            },
+            axisLine: {
+              lineStyle: {
+                color: linecolor.value,
+                width: 1 // 这里是为了突出显示加上的
+              }
+            },
+            splitLine: {
+              show: false, // 网格线
+              lineStyle: {
+                color: gridlinecolor.value,
+                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+              }
+            },
+            axisLabel: {
+              show: true,
+              position: 'bottom',
+              textStyle: {
+                color:textcolor.value,
+                fontSize: 14
+              }
+            },
+            type: 'value',
+            min: xMin.value * 60,
+            max: xMax.value * 60
+          },
+          {
+            name: '',
+            nameTextStyle: {
+              color: ynametextcolor.value,
+              fontSize: 14
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color:linecolor.value,
+                width: 1 // 这里是为了突出显示加上的
+              }
+            },
+            splitLine: {
+              show: false, // 网格线
+              lineStyle: {
+                color: gridlinecolor.value,
+                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+              }
+            },
+            axisLabel: {
+              show: false,
+              textStyle: {
+                color: textcolor.value,
+                fontSize: 14
+              }
+            },
+            type: 'value',
+            min: xMin.value,
+            max: xMax.value
+          }
+          ],
+          yAxis: [{
+            name: yname.value,
+            splitNumber: 5,
+            nameTextStyle: {
+              color: ynametextcolor.value,
+              fontSize: 14
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color:linecolor.value,
+                width: 1 // 这里是为了突出显示加上的
+              }
+            },
+            splitLine: {
+              show: true, // 网格线
+              lineStyle: {
+                color: gridlinecolor.value,
+                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: textcolor.value,
+                fontSize: 14
+              }
+            },
+            type: 'value',
+            min: 0,
+            max: ymax.value
+          }
+          ],
+          series: [
+            {
+              name: legend[0],
+              yAxisIndex: 0,
+              xAxisIndex: 1,
+              type: 'line',
+              smooth: true,
+              animationDuration: 1000,
+              showSymbol: false,
+              data: xdata1
+            },
+            {
+              name: legend[1],
+              yAxisIndex: 0,
+              xAxisIndex: 1,
+              type: 'line',
+              smooth: true,
+              animationDuration: 1000,
+              showSymbol: false,
+
+              data: xdata2
+            },
+
+            {
+              name: legend[2],
+              yAxisIndex: 0,
+              xAxisIndex: 1,
+              type: 'line',
+              smooth: true,
+              animationDuration: 1000,
+              symbolSize: 10,
+              data: xdata3
+            }
+            // {
+            //   name: this.legend[3],
+            //   yAxisIndex: 0,
+            //   type: "line",
+            //   smooth: true,
+            //   animationDuration: 1000,
+            //   showSymbol: false,
+            //   data: this.xdata4
+            // },
+          ]
+        }
+        // 将option返回
+        return option
+      }
+
+
+      function initCharts () {
+        // 图表控件
+        myChart.value = echarts.init(document.getElementById(props.setid))
+        // document.getElementById(this.setid).style.width = this.myWidth;
+        // document.getElementById(this.setid).style.height = "100px";
+        // 每个仪表盘参数设置
+      // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption( optionFun())
+      }
+      setYMax(data, data2) {
+        ymax.value = data
+        ymax2.value = data2
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setLegend (data) {
+        legend = data
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setXMax (data) {
+        xMax.value = data
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setXMin (data) {
+        xMin.value = data
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setXData1 (data) {
+        xdata1 = data
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setXData2 (data) {
+        xdata2 = data
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setXData3 (data) {
+        xdata3 = data
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setXData4 (data) {
+        xdata4 = data
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      clear () {
+        myChart.value.clear()
+      }
+      setTextColor (color) {
+        textcolor.value = color
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      setTitle (title1) {
+        title1.value = title1
+        // let option = optionFun()
+        // 绘制图表，设置参数信息
+        myChart.value.setOption(optionFun())
+      }
+      resize () {
+        myChart.value.resize()
+      }
+
+    // computed: {
+    //   scale () {
+    //     return [
+    //       {
+    //         dataKey: 'y',
+    //         alias: this.yaxisText
+    //       }
+    //     ]
+    //   }
+    // },
+
+    onMounted (()=>{
+      initCharts()
+    })
+</script>

src/views/vent/home/clique/components/main-monitor.vue

@@ -24,7 +24,8 @@
       </div>
     </div>
     <div class="main-contents">
-      <div class="main" ref="main"></div>
+      <!-- <div class="main" ref="main"></div> -->
+      <echartLine :setid="main" ref="main" style="width: 100%; height: 100%"></echartLine>
     </div>
   </div>
 </template>
@@ -32,7 +33,8 @@
 <script lang="ts" setup>
   import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
-  import * as echarts from 'echarts';
+  import echartLine from './EchartLineCharacter3.vue'
+  // import * as echarts from 'echarts';
  
 
   let props = defineProps({
@@ -71,154 +73,193 @@
     }
   }
 
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(main.value);
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-          },
-        },
+  // function getOption() {
+  //   nextTick(() => {
+  //     const myChart = echarts.init(main.value);
+  //     let option = {
+  //       tooltip: {
+  //         trigger: 'axis',
+  //         axisPointer: {
+  //           type: 'cross',
+  //         },
+  //       },
 
 
-        grid: {
-          top: '22%',
-          left: '5%',
-          right: '16%',
-          bottom: '5%',
-          containLabel: true,
-        },
+  //       grid: {
+  //         top: '22%',
+  //         left: '5%',
+  //         right: '16%',
+  //         bottom: '5%',
+  //         containLabel: true,
+  //       },
 
-        xAxis: [
-          {
-            type: 'category',
-            name: '负压(Pa)',
-            nameTextStyle: {
-              color: '#b3b8cc',
-              fontSize: 12,
-              padding: -5,
-            },
-            // boundaryGap: false,
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164)',
-              },
-            },
-            axisLabel: {
-              //坐标轴刻度标签的相关设置
-              textStyle: {
-                color: '#b3b8cc',
-                padding: 0,
-                fontSize: 14,
-              },
-              formatter: function (data) {
-                return data;
-              },
-            },
-            splitLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            data: echartData.xdata,
-          },
-        ],
+  //       xAxis: [
+  //         {
+  //           type: 'category',
+  //           name: '负压(Pa)',
+  //           nameTextStyle: {
+  //             color: '#b3b8cc',
+  //             fontSize: 12,
+  //             padding: -5,
+  //           },
+  //           // boundaryGap: false,
+  //           axisLine: {
+  //             //坐标轴轴线相关设置。数学上的x轴
+  //             show: true,
+  //             lineStyle: {
+  //               color: 'rgba(62, 103, 164)',
+  //             },
+  //           },
+  //           axisLabel: {
+  //             //坐标轴刻度标签的相关设置
+  //             textStyle: {
+  //               color: '#b3b8cc',
+  //               padding: 0,
+  //               fontSize: 14,
+  //             },
+  //             formatter: function (data) {
+  //               return data;
+  //             },
+  //           },
+  //           splitLine: {
+  //             show: false,
+  //           },
+  //           axisTick: {
+  //             show: false,
+  //           },
+  //           data: echartData.xdata,
+  //         },
+  //       ],
 
-        yAxis: [
-          {
-            name: '风量\n(m³/min)',
-            nameTextStyle: {
-              color: '#b3b8cc',
-              fontSize: 12,
-              padding: -5,
-            },
-            min: 0,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164,.4)',
-              },
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164)',
-              },
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#b3b8cc',
-                padding: 0,
-                fontSize: 14,
-              },
-              formatter: function (value) {
-                if (value === 0) {
-                  return value;
-                }
-                return value;
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-          },
-        ],
-        series: [
-          {
-            name: '风量',
-            type: 'line',
-            smooth: true,
-            yAxisIndex: 0,
-            symbolSize: 6,
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: 'orange', // 线条颜色
-              },
-              borderColor: 'rgba(0,0,0,.4)',
-            },
-            itemStyle: {
-              color: 'orange',
-              borderColor: '#646ace',
-              borderWidth: 0,
-            },
-            data: echartData.ydata,
-          },
-          {
-            name: '负压',
-            type: 'line',
-            smooth: true,
-            yAxisIndex: 0,
-            symbolSize: 6,
+  //       yAxis: [
+  //         {
+  //           name: '风量\n(m³/min)',
+  //           nameTextStyle: {
+  //             color: '#b3b8cc',
+  //             fontSize: 12,
+  //             padding: -5,
+  //           },
+  //           min: 0,
+  //           splitLine: {
+  //             show: true,
+  //             lineStyle: {
+  //               color: 'rgba(62, 103, 164,.4)',
+  //             },
+  //           },
+  //           axisLine: {
+  //             show: true,
+  //             lineStyle: {
+  //               color: 'rgba(62, 103, 164)',
+  //             },
+  //           },
+  //           axisLabel: {
+  //             show: true,
+  //             textStyle: {
+  //               color: '#b3b8cc',
+  //               padding: 0,
+  //               fontSize: 14,
+  //             },
+  //             formatter: function (value) {
+  //               if (value === 0) {
+  //                 return value;
+  //               }
+  //               return value;
+  //             },
+  //           },
+  //           axisTick: {
+  //             show: false,
+  //           },
+  //         },
+  //       ],
+  //       series: [
+  //         {
+  //           name: '风量',
+  //           type: 'line',
+  //           smooth: true,
+  //           yAxisIndex: 0,
+  //           symbolSize: 6,
+  //           lineStyle: {
+  //             normal: {
+  //               width: 2,
+  //               color: 'orange', // 线条颜色
+  //             },
+  //             borderColor: 'rgba(0,0,0,.4)',
+  //           },
+  //           itemStyle: {
+  //             color: 'orange',
+  //             borderColor: '#646ace',
+  //             borderWidth: 0,
+  //           },
+  //           data: echartData.ydata,
+  //         },
+  //         {
+  //           name: '负压',
+  //           type: 'line',
+  //           smooth: true,
+  //           yAxisIndex: 0,
+  //           symbolSize: 6,
 
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: '#00ba01', // 线条颜色
-              },
-              borderColor: 'rgba(0,0,0,.4)',
-            },
-            itemStyle: {
-              color: '#00ba01',
-              borderColor: '#646ace',
-              borderWidth: 0,
-            },
-            data: echartData.ydata1,
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+  //           lineStyle: {
+  //             normal: {
+  //               width: 2,
+  //               color: '#00ba01', // 线条颜色
+  //             },
+  //             borderColor: 'rgba(0,0,0,.4)',
+  //           },
+  //           itemStyle: {
+  //             color: '#00ba01',
+  //             borderColor: '#646ace',
+  //             borderWidth: 0,
+  //           },
+  //           data: echartData.ydata1,
+  //         },
+  //       ],
+  //     };
+  //     myChart.setOption(option);
+  //     window.onresize = function () {
+  //       myChart.resize();
+  //     };
+  //   });
+  // }
+   // 设置曲线数据
+   function setChart(param,character) {
+      // if(this.startfan !=1 && this.startfan !=2){
+      //   return
+      // }
+    
+      param.dataQ = param.dataQ == null?0:param.dataQ
+      param.dataH = param.dataH == null?0:param.dataH
+      let Q1 = Math.round(parseFloat(param.dataQ)/60*100)/100;
+      let H1 = parseFloat(param.dataH);
+
+      let q = Q1 - character.dataha3;
+      let h = H1 - character.dataha4;
+      // 风压特性曲线1
+      let data = [];
+      // 风压特性曲线2
+      let data2 = [];
+      let data3 = [];
+     
+        for (let i = 30; i <= 400; i++) {
+          let x = i;
+          let y4 =
+            character.dataha0 * (x - q) * (x - q) +
+            character.dataha1 * (x - q) +
+            character.dataha2 +
+            h;
+          data2.push([x, y4]);
+        }
+      for (let i = 0; i <= 400; i++) {
+        let x = i;
+        let y = (H1 / Q1 / Q1) * x * x;
+        data.push([x, y]);
+      }
+      // if(this.$refs.chartlineCharacter != null){
+        
+      main.value.setXData(data,data2,[[Q1, H1]]);
+      
+      // }
+    }
 
   watch(
     () => props.maindata,
@@ -237,7 +278,13 @@
       deep: true,
     }
   );
-  onMounted(() => { });
+  onMounted(() => { 
+      // 添加resize事件监听
+      main.value.setXMax(400);
+    main.value.setYMax(4000);
+    // window.addEventListener("resize", this.chartResize);
+    setChart({ dataQ: 100, dataH: 200 }, { dataha0: 20, dataha1: 40, dataha2: 60, dataha3: 80, dataha4: 70 })
+  });
 </script>
 
 <style lang="less" scoped>