feat(视图): Echarts 视图点击激活被选择后才能进行滚轮缩放操作，非激活状态禁止滚轮缩放 #3031

frontend/src/components/canvas/customComponent/UserView.vue

@@ -66,6 +66,7 @@
       :terminal-type="scaleCoefficientType"
       :scale="scale"
       :theme-style="element.commonBackground"
+      :active="this.active"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
@@ -1272,6 +1273,7 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  position: relative;
 }
 
 .chart-class {

frontend/src/views/chart/chart/chart.js

@@ -507,12 +507,14 @@ export const BASE_BAR = {
     },
     {
       type: 'inside',
+      disabled: true,
       xAxisIndex: [0],
       start: 0,
       end: 100
     },
     {
       type: 'inside',
+      disabled: true,
       yAxisIndex: [0],
       start: 0,
       end: 100
@@ -563,12 +565,14 @@ export const HORIZONTAL_BAR = {
     },
     {
       type: 'inside',
+      disabled: true,
       xAxisIndex: [0],
       start: 0,
       end: 100
     },
     {
       type: 'inside',
+      disabled: true,
       yAxisIndex: [0],
       start: 0,
       end: 100
@@ -621,12 +625,14 @@ export const BASE_LINE = {
     },
     {
       type: 'inside',
+      disabled: true,
       xAxisIndex: [0],
       start: 0,
       end: 100
     },
     {
       type: 'inside',
+      disabled: true,
       yAxisIndex: [0],
       start: 0,
       end: 100
@@ -903,14 +909,10 @@ export const BASE_MAP = {
   },
   geo: {
     map: 'MAP',
-    roam: true,
-    nameMap: {
-
-    },
+    roam: false,
+    nameMap: {},
     itemStyle: {
-      normal: {
-
-      },
+      normal: {},
       emphasis: {
         label: {
           show: false
@@ -926,9 +928,7 @@ export const BASE_MAP = {
       roam: true,
       data: [],
       itemStyle: {
-        normal: {
-
-        },
+        normal: {},
         emphasis: {
           label: {
             show: false
@@ -984,12 +984,14 @@ export const BASE_SCATTER = {
     },
     {
       type: 'inside',
+      disabled: true,
       xAxisIndex: [0],
       start: 0,
       end: 100
     },
     {
       type: 'inside',
+      disabled: true,
       yAxisIndex: [0],
       start: 0,
       end: 100
@@ -1079,12 +1081,14 @@ export const BASE_MIX = {
     },
     {
       type: 'inside',
+      disabled: true,
       xAxisIndex: [0],
       start: 0,
       end: 100
     },
     {
       type: 'inside',
+      disabled: true,
       yAxisIndex: [0],
       start: 0,
       end: 100

frontend/src/views/chart/components/ChartComponent.vue

@@ -65,6 +65,11 @@ export default {
     MapController
   },
   props: {
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     chart: {
       type: Object,
       required: true
@@ -121,7 +126,18 @@ export default {
       buttonTextColor: null,
       loading: true,
       showSuspension: true,
-      currentSeriesId: null
+      currentSeriesId: null,
+      haveScrollType: [
+        'map',
+        'chart-mix',
+        'bar',
+        'bar-stack',
+        'bar-horizontal',
+        'bar-stack-horizontal',
+        'line',
+        'line-stack',
+        'scatter'
+      ]
     }
   },
 
@@ -134,6 +150,11 @@ export default {
     ])
   },
   watch: {
+    active: {
+      handler(newVal, oldVla) {
+        this.scrollStatusChange(newVal)
+      }
+    },
     currentSeriesId(value, old) {
       if (value !== old) {
         this.preDraw()
@@ -173,6 +194,31 @@ export default {
     this.loadThemeStyle()
   },
   methods: {
+    scrollStatusChange() {
+      if (this.haveScrollType.includes(this.chart.type)) {
+        const opt = this.myChart.getOption()
+        this.adaptorOpt(opt)
+        this.myChart.setOption(opt)
+      }
+    },
+    adaptorOpt(opt) {
+      const disabledStatus = !this.active
+      if (opt.dataZoom) {
+        opt.dataZoom.forEach(function(s) {
+          if (s.type === 'inside') {
+            s.disabled = disabledStatus
+          }
+        })
+      }
+      //地图
+      if (opt.geo) {
+        if (opt.geo instanceof Array) {
+          opt.geo[0].roam = this.active
+        } else {
+          opt.geo.roam = this.active
+        }
+      }
+    },
     changeSeriesId(param) {
       const { id, seriesId } = param
       if (id !== this.chart.id) {
@@ -391,6 +437,7 @@ export default {
       }
     },
     myEcharts(option) {
+      this.adaptorOpt(option)
       // 指定图表的配置项和数据
       const chart = this.myChart
       this.setBackGroundBorder()