毛高统计页面功能调整

src/views/calc/calcMaogao/index.vue

@@ -67,7 +67,7 @@
 </template>
 <script>
   import { ref,onMounted,watch } from 'vue';
-  import {GetMaoGao,GetMaoGaoDetail} from "@/api/calc/calcMaogao";
+  import {GetMaoGao,GetMaoGaoDetail,GetMgoGaoTrend} from "@/api/calc/calcMaogao";
   import { ElDatePicker,ElMessage } from 'element-plus';
   import 'element-plus/dist/index.css'; // 确保导入样式文件
   import * as echarts from 'echarts';
@@ -110,10 +110,20 @@
                       type:"error",
                   });
               });
+              //获取趋势数据
+              getTrend();
           }
           function monthChange(v){
             console.log(v)
             getDetail(detailValue.value);
+            getTrend();
+          }
+
+          function getTrend(){
+            GetMgoGaoTrend(queryMonth.value).then(res=>{
+              showEcharts2(res.data);
+              showEcharts1(res.data.height);   
+            });
           }
 
           function getDetail(v){
@@ -129,9 +139,7 @@
                   if(res.code!=0){
                       return;
                   }
-                  detailDataList.value = res.data.curr;
-                  showEcharts1(res.data.his);
-                  showEcharts2(res.data.his);
+                  detailDataList.value = res.data;                                 
               }).catch(res=>{
                   ElMessage({
                       message:"数据获取失败！",
@@ -142,7 +150,7 @@
           //正态分布图
           function showEcharts1(seriesValuedata){
             //处理图表数据
-            function getChartData(baseData, cityName) {
+            function getChartData(baseData) {
                 var data = {
                     baseData: [],
                     xAxisData: [],//x轴
@@ -151,7 +159,7 @@
                 };
                 var sumObj = {};//保存每个aqi数值的出现次数
                 baseData.forEach(v=>{
-            			var aqi = Number(v.num);
+            			var aqi = Number(v);
             			data.baseData.push(aqi);
             			if(!sumObj[aqi]){
             				sumObj[aqi] = 1;
@@ -260,8 +268,14 @@
             var data = getChartData(seriesValuedata);
 
             let option = {
+              grid:{
+                top:"15%",
+                "bottom":"15%",
+                left:"5%",
+                right:"10%",
+              },
                 "legend": {},
-                color: ['rgb(50, 255, 200)', '#f00'],
+                color: ['#ff8896', '#409efe'], //分布曲线颜色、次数柱子颜色
                 //"color": ["#78b4ff", "#f66bc7", "#2bcba7", "#ff8896", "#79c628", "#6c93ee", "#a9abff", "#f7a23f", "#27bae7", "#ff6d9d", "#cb79ff", "#f95b5a", "#ccaf27", "#38b99c", "#93d0ff", "#bd74e0", "#fd77da", "#dea700"],
                 "xAxis": {
                     "name": "",
@@ -274,7 +288,7 @@
                 }],
                 "series": [
                     {
-                        "name": "实际出现次数",
+                        "name": "出现次数",
                         "data": data.realData,
                         "type": "bar",
                         "smooth": true,
@@ -290,6 +304,7 @@
                         "data": data.stdplotData,
                         "type": "line",
                         "smooth": true,
+                        symbol: 'none',
                         /*"areaStyle": {
                             "normal": {
                                 "color": "rgba(50, 255, 200, 0.5)"
@@ -305,15 +320,39 @@
             myChart.setOption(option);
           }
           function showEcharts2(hisdata){
+            const colors=['#a6cfa8'];
             let dates=[];
             let values=[];
-            hisdata.forEach(ele=>{
-              dates.push(ele.time.substr(5));
-              values.push(ele.num);
+            hisdata.time.forEach(ele=>{
+              dates.push(ele.substr(5));              
+            });
+            let sers=[];
+            hisdata.data.forEach(ele=>{
+              sers.push(                
+                {
+                  name: "毛高："+ele.height,
+                  data: ele.trend,
+                  type: "line",
+                  itemStyle: {
+                    //color: colors[sers.length],
+                  },
+                  label: {
+                    show: false, // 开启数据标签
+                    position: "top", // 标签显示在数据点上方，可选 'top'/'bottom'/'left'/'right' 等
+                    color: "#a6cfa8", // 标签文字颜色
+                  },
+                });
             })
             let option = {
+              grid:{
+                top:"5%",
+                "bottom":"15%",
+                left:"5%",
+                right:"5%",
+              },
               tooltip:{
                 show:true,
+                trigger:'axis'
               },
               title: {
                 show:false,
@@ -335,21 +374,7 @@
                 show: false,
                 bottom: "0",
               },
-              series: [
-                {
-                  name: "机台数",
-                  data: values,
-                  type: "line",
-                  itemStyle: {
-                    color: "#a6cfa8",
-                  },
-                  label: {
-                    show: true, // 开启数据标签
-                    position: "top", // 标签显示在数据点上方，可选 'top'/'bottom'/'left'/'right' 等
-                    color: "#a6cfa8", // 标签文字颜色
-                  },
-                }
-              ],
+              series:sers,
             };
             let mychat = echarts.init(echatrs2.value)
             mychat.setOption(option);