diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue index 8f0c7e7..7848706 100644 --- a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue +++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue @@ -171,8 +171,10 @@ const dragOption = { position: [], draggable: true, style: { - fill: 'rgba(0,0,0,0)', // fill: 'rgba(0,0,0,0.03)', 方便观察 - stroke: 'rgba(0,0,0,0)', // stroke: 'rgba(0,0,0,0.03)', 方便观察 + fill: 'rgba(0,0,0,0)', + stroke: 'rgba(0,0,0,0)', + // fill: 'rgba(255,0,0,0.5)', // 方便观察 + // stroke: 'rgba(255,0,0,0.5)', // 方便观察 lineWidth: 10, }, cursor: 'move', @@ -190,8 +192,10 @@ const dragOption = { position: [], draggable: true, style: { - fill: 'rgba(0,0,0,0)', // fill: 'rgba(0,0,0,0.03)', 方便观察 - stroke: 'rgba(0,0,0,0)', // stroke: 'rgba(0,0,0,0.03)', 方便观察 + fill: 'rgba(0,0,0,0)', + stroke: 'rgba(0,0,0,0)', + // fill: 'rgba(255,0,0,0.5)', // 方便观察 + // stroke: 'rgba(255,0,0,0.5)', // 方便观察 lineWidth: 10, }, cursor: 'move', @@ -575,6 +579,8 @@ export default { }, // 点击unzoom handleUnzoom() { + const [graphic1, graphic2] = this.dragOption.graphic + const { minX, maxX, minY, maxY, color } = this.boundaryData this.twoDOption.xAxis.min = 0 this.twoDOption.xAxis.max = 1024 this.twoDOption.yAxis.min = 0 @@ -582,8 +588,19 @@ export default { // this.emitRangeChange([0, 256, 0, 256]) this.reDrawRect() - this.buildScatterList() + this.$nextTick(() => { + const myChart = this.$refs.chartTwoDRef.getChartInstance() + graphic1.position = [ + myChart.convertToPixel({ xAxisId: '2' }, minX), + myChart.convertToPixel({ yAxisId: '3' }, maxY), + ] + graphic2.position = [ + myChart.convertToPixel({ xAxisId: '2' }, maxX), + myChart.convertToPixel({ yAxisId: '3' }, maxY), + ] + myChart.setOption(this.dragOption) + }) }, // 鼠标按下时开启可刷选状态 handleMouseDown() { @@ -607,6 +624,8 @@ export default { }, // 刷选完毕时 handleBrushEnd(param) { + const [graphic1, graphic2] = this.dragOption.graphic + const { minX: lineMinX, maxX: lineMaxX, minY: lineMinY, maxY: lineMaxY } = this.boundaryData const chart = this.$refs.chartTwoDRef.getChartInstance() const areas = param.areas[0] if (areas) { @@ -625,12 +644,46 @@ export default { this.twoDOption.xAxis.max = rangeNumberFuncX(x2) this.twoDOption.yAxis.min = rangeNumberFuncY(y1) this.twoDOption.yAxis.max = rangeNumberFuncY(y2) + this.buildScatterList() + this.$nextTick(() => { + const myChart = this.$refs.chartTwoDRef.getChartInstance() + if (lineMinX > rangeNumberFuncX(x1) && lineMinX < rangeNumberFuncX(x2) && lineMaxX > rangeNumberFuncX(x2)) { + graphic1.position = [ + myChart.convertToPixel({ xAxisId: '2' }, lineMinX), + myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)), + ] + myChart.setOption(this.dragOption) + } else if ( + lineMinX < rangeNumberFuncX(x1) && + lineMaxX > rangeNumberFuncX(x1) && + lineMaxX < rangeNumberFuncX(x2) + ) { + graphic2.position = [ + myChart.convertToPixel({ xAxisId: '2' }, lineMaxX), + myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)), + ] + myChart.setOption(this.dragOption) + } else if ( + lineMinX > rangeNumberFuncX(x1) && + lineMinX < rangeNumberFuncX(x2) && + lineMaxX > rangeNumberFuncX(x1) && + lineMaxX < rangeNumberFuncX(x2) + ) { + graphic1.position = [ + myChart.convertToPixel({ xAxisId: '2' }, lineMinX), + myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)), + ] + graphic2.position = [ + myChart.convertToPixel({ xAxisId: '2' }, lineMaxX), + myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)), + ] + myChart.setOption(this.dragOption) + } + }) // this.emitRangeChange([x1, x2, y1, y2]) // this.reDrawRect() - - this.buildScatterList() } this.clearBrush(chart)