有害生物弹框统计图样式修改

minggao/src/page/home/newHome/newHome.vue

@@ -3,7 +3,7 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:07
  * @LastEditors: lin
- * @LastEditTime: 2024-04-23 17:36:02
+ * @LastEditTime: 2024-04-24 13:50:35
 -->
 <template>
   <div class="box">
@@ -189,12 +189,7 @@
                   <span
                     v-if="groupInfo.alarm_level == 0"
                   >{{ warningObject[groupInfo.alarm_level].text }}</span>
-                  <el-tooltip
-                    v-else
-                    :content="groupInfo.alarm_latest"
-                    :popper-class="warningObject[groupInfo.alarm_level].class"
-                    placement="top"
-                  >
+                  <el-tooltip v-else :content="groupInfo.alarm_latest" placement="top">
                     <span>{{ warningObject[groupInfo.alarm_level].text }}</span>
                   </el-tooltip>
                 </span>
@@ -672,6 +667,7 @@ export default {
       });
       let legendData = [];
       let series = [];
+      let yAxis = [];
       yData.forEach((data, index) => {
         legendData.push({
           name: nameList[index],
@@ -679,11 +675,59 @@ export default {
             color: '#ffffff',
           },
         });
+        if(type != undefined) {
+          if ((index == 0 || index == 2)) {
+            yAxis.push({
+              type: 'value',
+              name: index == 0 ? '数量' : '种类',
+              color: colorList[index],
+              position: index == 0 ? 'left' : 'right',
+              alignTicks: true,
+              offset: 0,
+              nameTextStyle: {
+                color: '#fff',
+              },
+              axisLine: {
+                show: false, // 不显示 y 轴轴线
+              },
+              axisLabel: {
+                color: '#ffffff', // 设置 y 轴标签字体颜色为白色
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dotted', // 设置分隔线为点线
+                  color: '#ffffff88',
+                },
+              },
+            });
+          }
+        } else {
+          yAxis = [{
+            type: 'value',
+            name: '个数',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            axisLine: {
+              show: false, // 不显示 y 轴轴线
+            },
+            axisLabel: {
+              color: '#ffffff', // 设置 y 轴标签字体颜色为白色
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dotted', // 设置分隔线为点线
+                color: '#ffffff88',
+              },
+            },
+          }];
+        }
         series.push({
           data: data,
           type: 'bar',
-          stack: type ? type[index] : 'ab',
+          // stack: type ? type[index] : 'ab',
           name: nameList[index],
+          yAxisIndex: index < 2 ? 0 : 1,
         });
         if (!type) return;
         if (index == 0 || index == 2) {
@@ -693,10 +737,11 @@ export default {
             smooth: true,
             name: nameList[index],
             color: colorList[index],
+            yAxisIndex: index == 0 ? 0 : 1,
           });
         }
       });
-      console.log(legendData);
+      console.log(yAxis, series);
       let optionsPestLine = {
         // 设置全局文本样式
         textStyle: {
@@ -704,9 +749,9 @@ export default {
         },
         grid: {
           top: '50',
-          left: '2%',
+          left: '5%',
           bottom: '2%',
-          right: '0%',
+          right: '10%',
           containLabel: true,
         },
         legend: {
@@ -714,12 +759,6 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            crossStyle: {
-              color: '#999',
-            },
-          },
         },
         color: colorList,
         xAxis: {
@@ -737,25 +776,7 @@ export default {
           },
           data: xDataNew,
         },
-        yAxis: {
-          type: 'value',
-          name: '个数',
-          nameTextStyle: {
-            color: '#fff',
-          },
-          axisLine: {
-            show: false, // 不显示 y 轴轴线
-          },
-          axisLabel: {
-            color: '#ffffff', // 设置 y 轴标签字体颜色为白色
-          },
-          splitLine: {
-            lineStyle: {
-              type: 'dotted', // 设置分隔线为点线
-              color: '#ffffff88',
-            },
-          },
-        },
+        yAxis: yAxis,
         series: series,
       }; // 有害生物发生趋势 折线图
 
@@ -863,8 +884,8 @@ export default {
           },
         ],
       }; // 有害生物发生趋势 折线图
-      if(type == '杂草') {
-        optionsPestLine.series.length = 1
+      if (type == '杂草') {
+        optionsPestLine.series.shift();
       }
       char.setOption(optionsPestLine);
     },
@@ -873,7 +894,8 @@ export default {
       this.setLineOption(
         this.pestChart,
         this.pestLineObj[type].month,
-        [this.pestLineObj[type].count,this.pestLineObj[type].category_count], type
+        [this.pestLineObj[type].count, this.pestLineObj[type].category_count],
+        type
       );
     },
     // 获取有害生物列表折线图