服务器管理详情的监控图表添加brush横向选择功能

src/components/echartsList/line.vue

@@ -319,30 +319,39 @@
             } : {},
             series: series
           };
-          // 判断是否需要brush
+          /*     判断是否需要brush    */
           if (dataXY && dataXY.brushType && dataXY.brushType.length > 0) {
             let brushData = {
               brush: {
-                toolbox: dataXY.brushType,
-                brushType: dataXY.brushType[0], // 强制横向刷选（lineX=横向，lineY=纵向）
+                brushType: 'lineX',       // 横向刷选
+                brushMode: 'single',      // 单选模式
                 xAxisIndex: 0,
                 yAxisIndex: 0,
-                // 刷选模式：single（单选）/multiple（多选）
-                brushMode: 'single',
-                globalCursor: 'crosshair', // 鼠标进入图表显示十字准星，提示可选取
-                // 选框样式
+                toolbox: [''],              // 隐藏toolbox（关键：不显示但仍需激活）
+                // globalCursor: 'pointer',// 光标提示
+                globalCursor: null, // 禁用ECharts内置光标控制
                 brushStyle: {
                   color: 'rgba(0,0,0,0.07)', // 选框填充色
                   borderColor: 'rgba(0,0,0,0.07)' // 选框边框色
-                },
-                // 只允许刷选数据，不允许刷选空白区域
-                throttleType: 'debounce',
-                throttleDelay: 0
+                }
               }
             };
             option = Object.assign({}, option, brushData);
           }
           that.lineDataListIntance.setOption(option);
+          /*    围绕brush画笔展开设置    */
+          // 关键修复：初始化后主动激活刷选模式（模拟点击toolbox的横向选）
+          setTimeout(() => {
+            that.lineDataListIntance.dispatchAction({
+              type: 'takeGlobalCursor',
+              key: 'brush', // 激活brush的全局光标
+              brushOption: {
+                brushType: 'lineX', // 激活横向刷选模式
+                brushMode: 'single',
+                globalCursor: null,
+              }
+            });
+          }, 500); // 延迟500ms，确保图表渲染完成
           // 核心：获取 zrender 实例，监听整个容器的鼠标事件
           const zr = that.lineDataListIntance.getZr();
           // 5. 监听brush选中事件（核心：获取选中数据）
@@ -359,6 +368,18 @@
               that.chartData({timeArr: [dataXY.lineXData[that.brushLineXData[0]], dataXY.lineXData[that.brushLineXData[1]]]});
             }
           });
+          // 可选：点击空白处清空选框并重新激活刷选（避免拖拽一次后失效）
+          zr.on('click', (e) => {
+            // 清空选框
+            that.lineDataListIntance.dispatchAction({ type: 'brush', areas: [] });
+            // 重新激活刷选模式
+            that.lineDataListIntance.dispatchAction({
+              type: 'takeGlobalCursor',
+              key: 'brush',
+              brushOption: { brushType: 'lineX', brushMode: 'single',globalCursor: null, }
+            });
+          });
+          /*      是否设置高亮   */
           if (dataXY && dataXY.highlight) {
             // 然后高亮当前点击的数据点
             that.lineDataListIntance.dispatchAction({
@@ -507,6 +528,12 @@
   .chart-container {
     width: 100%;
     height: 100%;
+    /* 关键：通过CSS强制设置光标为箭头，优先级最高 */
+    cursor: default !important;
+  }
+  /* 覆盖ECharts内部生成的DOM光标  修改brush画笔默认的globalCursor */
+  ::v-deep .chart-container > div {
+    cursor: default !important;
   }
   .selOptionSty {
     display: inline-block;