正太分布图提交

src/views/tjanalysis/zlanalysis/components/ztfbview.vue

@@ -5,7 +5,7 @@
 </template>
 <script lang="ts" setup>
 import * as echarts from 'echarts'
-import * as math from './math'
+import * as math from './ztmath'
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 
@@ -26,7 +26,7 @@ function func(x, u, a) {
 }
 
 const initData = async (data , xMin , xMax) => {
-    var mean = math.mean(data) //平均值  计算方法来自math.js
+    var mean =  math.mean(data) //平均值  计算方法来自math.js
     var stdev = math.std(data) //方差
     var threeSigUp = mean + 3 * stdev
     var threeSigLow = mean - 3 * stdev
@@ -127,14 +127,14 @@ function setEchartData(xMin , xMax , yArr , fArr , threeSigLow , threeSigUp) {
         max: xMax,
         axisLabel: {
           textStyle: {
-            color: "rgba(255,255,255,1)",
+            color: '#000000',
             fontSize: 10
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: "rgba(255,255,255,1)"
+            color: "#000000"
           }
         },
         splitLine: {
@@ -151,13 +151,13 @@ function setEchartData(xMin , xMax , yArr , fArr , threeSigLow , threeSigUp) {
         axisLine: {
           show: false,
           lineStyle: {
-            color: "rgba(255,255,255,1)"
+            color: "#000000"
           }
         },
         axisLabel: {
           show: true,
           textStyle: {
-            color: "rgba(255,255,255,1)",
+            color: "	#6B8E23",
             fontSize: 10
           }
         },
@@ -322,5 +322,9 @@ function setEchartData(xMin , xMax , yArr , fArr , threeSigLow , threeSigUp) {
   }
 }
 
-
+onMounted(() => {
+  // const script = document.createElement('script');
+  // script.setAttribute('src', math);
+  // document.head.appendChild(script);
+})
 </script>

src/views/tjanalysis/zlanalysis/components/ztmath.ts

@@ -0,0 +1,31 @@
+import { forEach } from './../../../../utils/tree'
+
+
+// 计算平均值
+export const mean = (datas: Array<String>) => {
+    let sum = 0.00
+    if (datas == null || datas.length == 0) return 0.00;
+
+    datas.forEach((item)=>{
+        sum = sum + parseFloat(item.toString())
+    })
+
+    return sum / datas.length 
+}
+
+// 计算方差
+export const std = (datas: Array<String>) => {
+    let xSum = 0.00
+    let xAvg = 0.00
+    let avgX = 0.00
+    const arrNum = datas.length 
+
+    for (let i = 0; i < arrNum; i++){
+        xSum += parseFloat(datas[i].toString());
+    }
+    xAvg = xSum / arrNum;//平均值
+    //平均差求绝对值
+    avgX = Math.abs(0 - xAvg);
+
+    return Math.pow(avgX, 2)
+}

src/views/tjanalysis/zlanalysis/index.vue

@@ -169,7 +169,8 @@
         <div id="myEcharts2" :style="{ width: '50%', height: '300px' }" v-loading="ec2Loading"></div>
       </div>
       <div class="charts" v-show="tabIndex == 1">
-        <div id="myEcharts3" :style="{ width: '80vw', height: '300px' }" v-loading="ec3Loading"></div>
+        <!-- <div id="myEcharts3" :style="{ width: '80vw', height: '300px' }" v-loading="ec3Loading"></div> -->
+        <ZtfbView ref="myEcharts3Ref" v-loading="ec3Loading" />
       </div>
       <div class="charts" v-show="tabIndex == 2">
         <div id="myEcharts4" :style="{ width: '80vw', height: '300px' }" v-loading="ec4Loading"></div>
@@ -188,10 +189,11 @@ import * as ItembasicApi from '@/api/spc/itembasic'
 import * as TemplateItemDetailsApi from '@/api/spc/templateItemDetails'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import {formatDate} from '@/utils/formatTime'
-// import { listSimpleDictData } from '@/api/system/dict/dict.data'
-
+import ZtfbView from './components/ztfbview.vue'
 
 let echart = echarts
+const myEcharts3Ref = ref()
+
 // 项目列表
 const projectList = ref()
 // 物料列表
@@ -351,87 +353,10 @@ function setChart2(rangeData) {
     chart.resize()
   }
 }
-function setChart3() {
-  let chart = echart.init(document.getElementById('myEcharts3'), 'light')
-  // 把配置和数据放这里
-  chart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        crossStyle: {
-          color: '#999'
-        }
-      }
-    },
-    legend: {
-      data: ['Evaporation', 'Precipitation', 'Temperature']
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      top: '15%',
-      bottom: '10%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        axisPointer: {
-          type: 'shadow'
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        name: 'Precipitation',
-        min: 0,
-        max: 250,
-        interval: 50,
-        axisLabel: {
-          formatter: '{value} ml'
-        }
-      },
-      {
-        type: 'value',
-        name: 'Temperature',
-        min: 0,
-        max: 25,
-        interval: 5,
-        axisLabel: {
-          formatter: '{value} °C'
-        }
-      }
-    ],
-    series: [
-      {
-        name: '原数据频率',
-        type: 'bar',
-        tooltip: {
-          valueFormatter: function (value) {
-            return value + ' ml'
-          }
-        },
-        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
-      },
-      {
-        name: '正态分布',
-        type: 'line',
-        yAxisIndex: 1,
-        tooltip: {
-          valueFormatter: function (value) {
-            return value + ' °C'
-          }
-        },
-        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
-      }
-    ]
-  })
-  window.onresize = function () {
-    //自适应大小
-    chart.resize()
+function setChart3(ztData) {
+  // console.log(ztData , 'daikun')
+  if (ztData != null) {
+    myEcharts3Ref.value.open(ztData.datas , ztData.downLimit , ztData.upLimit)
   }
 }
 function setChart4(ybData) {
@@ -548,6 +473,7 @@ const changTabIndex = async (tIndexV) => {
   tabIndex.value = tIndexV
   queryParams.ecTab = tIndexV
   const dvDatas = await ZlnalysisAPI.getZcnlEcharts(queryParams)
+  // console.log(dvDatas , '333333')
   if (dvDatas != null) {
     if (tIndexV == 0) {
       setChart1(dvDatas.menMap)
@@ -555,7 +481,8 @@ const changTabIndex = async (tIndexV) => {
       ec1Loading.value = false
       ec2Loading.value = false
     } else if (tIndexV == 1) {
-
+      setChart3(dvDatas.ztMap)
+      ec3Loading.value = false
     } else if (tIndexV == 2) {
       setChart4(dvDatas.ybMap)
       ec4Loading.value = false