feat: 自建台站散点图右侧增加根据滑块范围控制颜色功能

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -26,8 +26,16 @@
           @resize="handleChartResize"
         />
         <div class="bar">
-          <div>{{ visualMapMax }}</div>
-          <div class="bar-main"></div>
+          <div>{{ visualMap.max }}</div>
+          <div class="bar-main">
+            <a-slider
+              v-model="visualMap.value"
+              range
+              vertical
+              :max="visualMap.max"
+              @afterChange="handleSliderChange"
+            ></a-slider>
+          </div>
           <div>0</div>
         </div>
       </div>
@@ -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;
       }
     }
   }