diff --git a/src/components/echartsList/line.vue b/src/components/echartsList/line.vue index d2ddaf9..778ec3b 100644 --- a/src/components/echartsList/line.vue +++ b/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; diff --git a/src/views/resource/serverRegister/details.vue b/src/views/resource/serverRegister/details.vue index 78af0e5..218b890 100644 --- a/src/views/resource/serverRegister/details.vue +++ b/src/views/resource/serverRegister/details.vue @@ -184,6 +184,7 @@ resultData: [ { dataVal: { + brushType: ['lineX'], titleVal: {textAlign: 'left', left: '1%'}, hiddenTime: true, yAxisName: ' ', @@ -201,6 +202,7 @@ } },{ dataVal: { + brushType: ['lineX'], titleVal: {textAlign: 'left', left: '1%'}, hiddenTime: true, yAxisName: ' ', @@ -218,6 +220,7 @@ echartData: { title: ' ', dataVal: { + brushType: ['lineX'], hiddenTime: true, titleVal: {textAlign: 'left', left: '1%'}, yAxisName: ' ',