From 03f83d82d5ccd6f89b3469e1681d3c83c26ea910 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 27 Jun 2022 16:49:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20antV=E5=9B=BE=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=81=94=E5=8A=A8=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/CanvasOptBar.vue |  2 +
 .../canvas/components/Editor/EditBar.vue      | 18 +------
 .../canvas/custom-component/UserView.vue      |  5 ++
 frontend/src/store/index.js                   |  1 -
 .../src/views/chart/chart/bar/bar_antv.js     |  6 ---
 .../views/chart/chart/funnel/funnel_antv.js   |  6 ---
 .../src/views/chart/chart/line/line_antv.js   |  6 ---
 .../src/views/chart/chart/mix/mix_antv.js     | 12 -----
 .../src/views/chart/chart/pie/pie_antv.js     |  6 ---
 .../src/views/chart/chart/radar/radar_antv.js |  6 ---
 .../views/chart/chart/scatter/scatter_antv.js |  6 ---
 .../views/chart/chart/treemap/treemap_antv.js |  6 ---
 .../views/chart/chart/waterfall/waterfall.js  |  6 ---
 .../views/chart/chart/wordCloud/word_cloud.js |  6 ---
 .../chart/components/ChartComponentG2.vue     | 51 ++++++++++++++++++-
 15 files changed, 58 insertions(+), 85 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
index 9043554a02..1c95b2c34d 100644
--- a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
+++ b/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
@@ -8,6 +8,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import bus from '@/utils/bus'
 
 export default {
   computed: {
@@ -27,6 +28,7 @@ export default {
   methods: {
     clearAllLinkage() {
       this.$store.commit('clearPanelLinkageInfo')
+      bus.$emit('clear_panel_linkage', { viewId: 'all' })
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index 7194ec93af..9ab79f5995 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -196,23 +196,6 @@ export default {
       // resize
       this.$emit('resizeView')
     },
-    // edit() {
-    //   // 编辑时临时保存 当前修改的画布
-    //   this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
-    //   this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
-    //   if (this.curComponent.type === 'view') {
-    //     this.$store.dispatch('chart/setViewId', null)
-    //     this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-    //     bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
-    //   }
-    //   if (this.curComponent.type === 'custom') {
-    //     bus.$emit('component-dialog-edit')
-    //   }
-    //   // 编辑样式组件
-    //   if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
-    //     bus.$emit('component-dialog-style')
-    //   }
-    // },
     edit() {
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit')
@@ -240,6 +223,7 @@ export default {
           }
         }
       })
+      bus.$emit('clear_panel_linkage', { viewId: this.element.propValue.viewId })
     },
     linkJumpSet() {
       this.$emit('linkJumpSet')
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 393dd0f0f5..3075c9402e 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -492,6 +492,11 @@ export default {
       bus.$on('onThemeAttrChange', (param) => {
         this.optFromBatchSingleProp(param)
       })
+      bus.$on('clear_panel_linkage', (param) => {
+        if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
+          this.$refs[this.element.propValue.id].reDrawView()
+        }
+      })
     },
 
     addViewTrackFilter(linkageParam) {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index af8c7ca9aa..d716637351 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -481,7 +481,6 @@ const data = {
           item.linkageFilters.splice(0, item.linkageFilters.length)
         }
       })
-      // state.styleChangeTimes++
     },
     setDragComponentInfo(state, dragComponentInfo) {
       dragComponentInfo['shadowStyle'] = {
diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js
index 96e127edac..66ca26cb34 100644
--- a/frontend/src/views/chart/chart/bar/bar_antv.js
+++ b/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -43,12 +43,6 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
     slider: slider,
     annotations: analyse,
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'legend-active', cfg: {
           start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/funnel/funnel_antv.js b/frontend/src/views/chart/chart/funnel/funnel_antv.js
index 4e6daf3b9f..6d12901088 100644
--- a/frontend/src/views/chart/chart/funnel/funnel_antv.js
+++ b/frontend/src/views/chart/chart/funnel/funnel_antv.js
@@ -24,12 +24,6 @@ export function baseFunnelOptionAntV(plot, container, chart, action) {
     legend: legend,
     conversionTag: false,
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'legend-active', cfg: {
           start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js
index d4017b2d44..78ec7ca7d3 100644
--- a/frontend/src/views/chart/chart/line/line_antv.js
+++ b/frontend/src/views/chart/chart/line/line_antv.js
@@ -44,12 +44,6 @@ export function baseLineOptionAntV(plot, container, chart, action) {
     slider: slider,
     annotations: analyse,
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'legend-active', cfg: {
           start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/mix/mix_antv.js b/frontend/src/views/chart/chart/mix/mix_antv.js
index 8298d79b5c..89ae65d244 100644
--- a/frontend/src/views/chart/chart/mix/mix_antv.js
+++ b/frontend/src/views/chart/chart/mix/mix_antv.js
@@ -54,18 +54,6 @@ export function baseMixOptionAntV(plot, container, chart, action) {
         xAxis: i > 0 ? false : xAxis,
         yAxis: (i >= JSON.parse(chart.yaxis).length) ? yAxisExt : yAxis,
         interactions: [
-          {
-            type: 'element-active', cfg: {
-              start: [{
-                trigger: 'element:mouseenter',
-                action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer']
-              }],
-              end: [{
-                trigger: 'element:mouseleave',
-                action: ['element-highlight:reset', 'element-active:reset', 'cursor:default']
-              }]
-            }
-          },
           {
             type: 'legend-active', cfg: {
               start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js
index 7eb3c42d40..0ef801f74d 100644
--- a/frontend/src/views/chart/chart/pie/pie_antv.js
+++ b/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -44,12 +44,6 @@ export function basePieOptionAntV(plot, container, chart, action) {
       }
     },
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'legend-active', cfg: {
           start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/radar/radar_antv.js b/frontend/src/views/chart/chart/radar/radar_antv.js
index 115a336276..1780c1a4b4 100644
--- a/frontend/src/views/chart/chart/radar/radar_antv.js
+++ b/frontend/src/views/chart/chart/radar/radar_antv.js
@@ -41,12 +41,6 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
       }
     },
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'legend-active', cfg: {
           start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/scatter/scatter_antv.js b/frontend/src/views/chart/chart/scatter/scatter_antv.js
index 6bfc0529a6..d9ca30cc85 100644
--- a/frontend/src/views/chart/chart/scatter/scatter_antv.js
+++ b/frontend/src/views/chart/chart/scatter/scatter_antv.js
@@ -47,12 +47,6 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
       lineWidth: 0
     },
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'legend-active', cfg: {
           start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/treemap/treemap_antv.js b/frontend/src/views/chart/chart/treemap/treemap_antv.js
index a592a93333..ea695a290c 100644
--- a/frontend/src/views/chart/chart/treemap/treemap_antv.js
+++ b/frontend/src/views/chart/chart/treemap/treemap_antv.js
@@ -24,12 +24,6 @@ export function baseTreemapOptionAntV(plot, container, chart, action) {
     tooltip: tooltip,
     legend: legend,
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'legend-active', cfg: {
           start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
diff --git a/frontend/src/views/chart/chart/waterfall/waterfall.js b/frontend/src/views/chart/chart/waterfall/waterfall.js
index 2bb2ff8d03..10849c082a 100644
--- a/frontend/src/views/chart/chart/waterfall/waterfall.js
+++ b/frontend/src/views/chart/chart/waterfall/waterfall.js
@@ -69,12 +69,6 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
     fallingFill: theme.styleSheet.paletteQualitative10[1],
     total: total,
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      },
       {
         type: 'tooltip', cfg: {
           start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
diff --git a/frontend/src/views/chart/chart/wordCloud/word_cloud.js b/frontend/src/views/chart/chart/wordCloud/word_cloud.js
index 7e1d29e30e..af7000e998 100644
--- a/frontend/src/views/chart/chart/wordCloud/word_cloud.js
+++ b/frontend/src/views/chart/chart/wordCloud/word_cloud.js
@@ -30,12 +30,6 @@ export function baseWordCloudOptionAntV(plot, container, chart, action) {
     tooltip: tooltip,
     legend: false,
     interactions: [
-      {
-        type: 'element-active', cfg: {
-          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
-          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
-        }
-      }
     ]
   }
 
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 3fbbac736a..3e20adfe5f 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -82,7 +82,10 @@ export default {
         background: ''
       },
       title_show: true,
-      antVRenderStatus: false
+      antVRenderStatus: false,
+      linkageActiveParam: null,
+      linkageActiveHistory: false
+
     }
   },
 
@@ -115,6 +118,43 @@ export default {
     this.preDraw()
   },
   methods: {
+    reDrawView() {
+      this.linkageActiveHistory = false
+      this.myChart.render()
+    },
+    linkageActivePre() {
+      if (this.linkageActiveHistory) {
+        this.reDrawView()
+      }
+      this.$nextTick(() => {
+        this.linkageActive()
+      })
+    },
+    linkageActive() {
+      this.linkageActiveHistory = true
+      this.myChart.setState('selected', (param) => {
+        if (Array.isArray(param)) {
+          return false
+        } else {
+          if (this.checkSelected(param)) {
+            return true
+          }
+        }
+      })
+      this.myChart.setState('inactive', (param) => {
+        if (Array.isArray(param)) {
+          return false
+        } else {
+          if (!this.checkSelected(param)) {
+            return true
+          }
+        }
+      })
+    },
+    checkSelected(param) {
+      return (this.linkageActiveParam.name.indexOf(param.name) > -1) &&
+        (this.linkageActiveParam.category === param.category)
+    },
     preDraw() {
       this.initTitle()
       this.calcHeightDelay()
@@ -186,6 +226,9 @@ export default {
 
       if (this.antVRenderStatus) {
         this.myChart.render()
+        if (this.linkageActiveHistory) {
+          this.linkageActive()
+        }
       }
       this.setBackGroundBorder()
     },
@@ -196,6 +239,10 @@ export default {
       } else {
         this.pointParam = param.data
       }
+      this.linkageActiveParam = {
+        category: this.pointParam.data.category ? this.pointParam.data.category : 'NO_DATA',
+        name: this.pointParam.data.name ? this.pointParam.data.name : 'NO_DATA'
+      }
       if (this.trackMenu.length < 2) { // 只有一个事件直接调用
         this.trackClick(this.trackMenu[0])
       } else { // 视图关联多个事件
@@ -236,11 +283,13 @@ export default {
         dimensionList: this.pointParam.data.dimensionList,
         quotaList: this.pointParam.data.quotaList
       }
+
       switch (trackAction) {
         case 'drill':
           this.$emit('onChartClick', this.pointParam)
           break
         case 'linkage':
+          this.linkageActivePre()
           this.$store.commit('addViewTrackFilter', linkageParam)
           break
         case 'jump':