diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue index 1938de5..6715ba5 100644 --- a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue +++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue @@ -26,8 +26,16 @@ @resize="handleChartResize" />
@@ -224,7 +232,6 @@ export default { return { showROI: true, - myChart: null, startChannel: null, endChannel: null, boundaryList: [], // 最终生成的框 @@ -232,8 +239,6 @@ export default { isLog: true, // 当前右侧的图表是否是log currBoundaryItem: null, // 当前正在操作的方框 - visualMapMax: 0, - chartAxis: cloneDeep(ChartAxis), boundary: [], @@ -243,6 +248,12 @@ export default { g: 0, c: 0, }, + + visualMap: { + // 右侧范围选择 + value: [0, 0], + max: 0, + }, } }, created() { @@ -357,23 +368,52 @@ export default { // 构造一个scatter 的点 buildScatterItem(xAxis, yAxis, count) { - const { r, g, b } = this.interpolateColor(1 - count / this.visualMapMax) - return { - value: [xAxis, yAxis], + value: [xAxis, yAxis, count], itemStyle: { - color: `rgb(${r}, ${g}, ${b})`, + color: this.getScatterItemColor(count), }, } }, - setVisialMapParams() { - const counts = this.histogramDataList.filter(({ c }) => c).map(({ c }) => c) - if (counts.length) { - this.visualMapMax = counts.sort((a, b) => b - a)[0] + // 获取一个点的颜色 + getScatterItemColor(count) { + const [min, max] = this.visualMap.value + let color = '' + if (count >= max) { + color = '#f00' + } else if (count <= min) { + color = '#fff' } else { - this.visualMapMax = 0 + const { r, g, b } = this.interpolateColor(1 - (count - min) / (max - min)) + color = `rgb(${r}, ${g}, ${b})` } + return color + }, + + // 设置右侧滑块参数 + setVisialMapParams() { + const counts = this.histogramDataList + .filter(({ c }) => c) + .map(({ c }) => c) + .sort((a, b) => b - a) + const max = (counts[0] || 0) + 100 + // 要求在最大值基础上加100 + this.visualMap.max = max + this.visualMap.value = [0, max] + }, + + // 右侧滑块改变 + handleSliderChange() { + this.scatterList.forEach((item) => { + item.itemStyle.color = this.getScatterItemColor(item.value[2]) + }) + + this.$refs.chartTwoDRef.setOption({ + series: { + data: this.scatterList, + }, + }) }, // 颜色插值算法 @@ -710,7 +750,35 @@ export default { &-main { width: 14px; flex: 1; - background: linear-gradient(to bottom, #ff0000 0, #fff 100%); + + .ant-slider { + margin: 0; + padding: 0; + + ::v-deep { + .ant-slider-handle { + left: -2px; + right: -2px; + border-radius: 0; + margin-left: 0; + box-shadow: none; + border: 0; + background: #0cebc9; + height: 6px; + width: auto; + } + + .ant-slider-rail { + width: 100%; + background: #084248 !important; + } + + .ant-slider-track { + width: 100%; + background: linear-gradient(to bottom, #f00 0, #fff 100%); + } + } + } } } } @@ -728,11 +796,9 @@ export default { } &.disabled { - cursor: not-allowed; - .boundary-item-left, .boundary-item-right { - cursor: default; + pointer-events: none; } } }