feat(视图):地图可以切换指标

frontend/src/components/canvas/components/editor/ComponentWrapper.vue

@@ -11,6 +11,7 @@
       :terminal="terminal"
       :element="config"
       :canvas-id="canvasId"
+      :chart="chart"
       :show-position="showPosition"
       @showViewDetails="showViewDetails"
     />
@@ -65,6 +66,7 @@
         :screen-shot="screenShot"
         :canvas-style-data="canvasStyleData"
         :show-position="showPosition"
+        @fill-chart-2-parent="setChartData"
       />
     </div>
   </div>
@@ -146,7 +148,8 @@ export default {
   },
   data() {
     return {
-      previewVisible: false
+      previewVisible: false,
+      chart: null
     }
   },
   computed: {
@@ -211,6 +214,9 @@ export default {
     runAnimation(this.$el, this.config.animations)
   },
   methods: {
+    setChartData(chart) {
+      this.chart = chart
+    },
     getStyle,
     getShapeStyleIntDeDrag(style, prop) {
       if (prop === 'rotate') {

frontend/src/components/canvas/components/editor/DeEditor.vue

@@ -107,6 +107,7 @@
         :canvas-style-data="canvasStyleData"
         @input="handleInput"
         @trigger-plugin-edit="pluginEditHandler"
+        @fill-chart-2-parent="setChartData"
       />
     </de-drag>
     <!--拖拽阴影部分-->
@@ -1096,6 +1097,13 @@ export default {
   created() {
   },
   methods: {
+    setChartData(chart) {
+      this.componentData.forEach((item, index) => {
+        if (item.type === 'view' && item.component === 'user-view' && item.propValue.viewId === chart.id) {
+          this.$refs['deDragRef'][index].setChartData(chart)
+        }
+      })
+    },
     triggerResetButton() {
       this.triggerSearchButton(true)
     },

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -94,7 +94,7 @@
         >
           <i
             class="icon iconfont icon-shezhi"
-            style="margin-top:2px"
+            style="margin-top:2px; width: 16px;"
           />
         </span>
       </setting-menu>
@@ -140,6 +140,11 @@
           <i class="icon iconfont icon-com-jump" />
         </a>
       </span>
+
+      <map-layer-controller
+        v-if="chart && showMapLayerController"
+        :chart="chart"
+      />
     </div>
 
     <!--跳转设置-->
@@ -185,9 +190,10 @@ import toast from '@/components/canvas/utils/toast'
 import FieldsList from '@/components/canvas/components/editor/FieldsList'
 import LinkJumpSet from '@/views/panel/linkJumpSet'
 import Background from '@/views/background/index'
+import MapLayerController from '@/views/chart/components/map/MapLayerController'
 
 export default {
-  components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField },
+  components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController },
 
   props: {
     canvasId: {
@@ -226,6 +232,10 @@ export default {
       type: String,
       required: false,
       default: 'NotProvided'
+    },
+    chart: {
+      type: Object,
+      default: null
     }
   },
   data() {
@@ -249,6 +259,13 @@ export default {
   },
 
   computed: {
+    yaxis() {
+      if (!this.chart) return []
+      return JSON.parse(this.chart.yaxis)
+    },
+    showMapLayerController() {
+      return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType === 'map' && this.yaxis.length > 1
+    },
     detailsShow() {
       return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType !== 'richTextView'
     },
@@ -519,7 +536,7 @@ export default {
   background-color: var(--primary, #3370ff);
 }
 
-.bar-main i {
+.bar-main ::v-deep i {
   color: white;
   float: right;
   margin-right: 3px;

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

@@ -518,6 +518,9 @@ export default {
         this.chartScale(this.changeScaleIndex)
       },
       deep: true
+    },
+    'chart.yaxis': function(newVal, oldVal) {
+      this.$emit('fill-chart-2-parent', this.chart)
     }
   },
   mounted() {
@@ -691,6 +694,7 @@ export default {
           // 将视图传入echart组件
           if (response.success) {
             this.chart = response.data
+            this.$emit('fill-chart-2-parent', this.chart)
             this.getDataOnly(response.data, dataBroadcast)
             this.chart['position'] = this.inTab ? 'tab' : 'panel'
             // 记录当前数据

frontend/src/components/deDrag/index.vue

@@ -39,6 +39,7 @@
         :active-model="'edit'"
         :canvas-id="canvasId"
         :element="element"
+        :chart="chart"
         @showViewDetails="showViewDetails"
         @amRemoveItem="amRemoveItem"
         @amAddItem="amAddItem"
@@ -384,6 +385,7 @@ export default {
   },
   data: function() {
     return {
+      chart: null,
       contentDisplay: true,
       // 当画布在tab中是 宽度左右拓展的余量
       parentWidthTabOffset: 40,
@@ -802,6 +804,9 @@ export default {
     this.beforeDestroyFunction()
   },
   methods: {
+    setChartData(chart) {
+      this.chart = chart
+    },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {
       this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }

frontend/src/components/widget/deWidget/inputStyleMixin.js

@@ -58,7 +58,7 @@ export default {
   mounted() {
     if (!this.isFilterComponent) return
     this.typeTransform().forEach(item => {
-      const nodeCache = this.$refs.deOutWidget?.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[item].$el
+      const nodeCache = this.$refs.deOutWidget?.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget?.$refs[item].$el
       this.styleAttrs.forEach(ele => {
         nodeCache.style[this.attrsMap[ele]] = this.element.style[ele]
         this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(item), ele, this.element.style[ele])
@@ -70,9 +70,11 @@ export default {
       let nodeCache = ''
       this.styleAttrs.forEach(ele => {
         if (!nodeCache) {
-          nodeCache = this.$refs.deOutWidget?.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[type].$el
+          nodeCache = this.$refs.deOutWidget?.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget?.$refs[type].$el
+        }
+        if (nodeCache) {
+          nodeCache.style[this.attrsMap[ele]] = newValue[ele]
         }
-        nodeCache.style[this.attrsMap[ele]] = newValue[ele]
         this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(type), ele, newValue[ele])
       })
     },

frontend/src/lang/en.js

@@ -915,6 +915,7 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    layer_controller: 'Quota switch',
     suspension: 'Suspension',
     chart_background: 'Component background',
     solid_color: 'Solid color',

frontend/src/lang/tw.js

@@ -915,6 +915,7 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    layer_controller: '指標切換',
     suspension: '懸浮',
     chart_background: '組件背景',
     solid_color: '純色',

frontend/src/lang/zh.js

@@ -914,6 +914,7 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    layer_controller: '指标切换',
     suspension: '悬浮',
     chart_background: '组件背景',
     solid_color: '纯色',

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

@@ -41,8 +41,22 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
   // 处理shape attr
   let customAttr = {}
   let isGradient = false
+  let seriesIndex = 0
   if (chart.customAttr) {
     customAttr = JSON.parse(chart.customAttr)
+    if (chart.yaxis && chart.yaxis.length > 1) {
+      let currentSeriesId = customAttr.currentSeriesId
+      const yAxis = JSON.parse(chart.yaxis)
+      if (!currentSeriesId || !yAxis.some(item => item.id === currentSeriesId)) {
+        currentSeriesId = yAxis[0].id
+      }
+      chart.data.series.forEach((item, index) => {
+        if (item.data[0].quotaList[0].id === currentSeriesId) {
+          seriesIndex = index
+          return false
+        }
+      })
+    }
 
     if (customAttr.color) {
       const colorValue = customAttr.color.value
@@ -57,7 +71,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
       const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
       const reg = new RegExp('\n', 'g')
       const text = tooltip.formatter.replace(reg, '<br/>')
-      tooltip.formatter = function(params) {
+      tooltip.formatter = params => {
         const a = params.seriesName
         const b = params.name
         const c = params.value ? params.value : ''
@@ -74,14 +88,14 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
   if (chart.data) {
     chart_option.title.text = chart.title
     if (chart.data.series && chart.data.series.length > 0) {
-      chart_option.series[0].name = chart.data.series[0].name
+      chart_option.series[0].name = chart.data.series[seriesIndex].name
       chart_option.series[0].selectedMode = true
       chart_option.series[0].select = BASE_ECHARTS_SELECT
       // label
       if (customAttr.label) {
         const text = customAttr.label.formatter
         chart_option.series[0].label = customAttr.label
-        chart_option.series[0].label.formatter = function(params) {
+        chart_option.series[0].label.formatter = params => {
           const a = params.seriesName
           const b = params.name
           const c = params.value ? params.value : ''
@@ -97,12 +111,12 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
         }
         chart_option.series[0].itemStyle.emphasis.label.show = customAttr.label.show
       }
-      const valueArr = chart.data.series[0].data
+      const valueArr = chart.data.series[seriesIndex].data
       // visualMap
       if (!isGradient) {
         if (valueArr && valueArr.length > 0) {
           const values = []
-          valueArr.forEach(function(ele) {
+          valueArr.forEach(ele => {
             values.push(ele.value)
           })
           chart_option.visualMap.min = Math.min(...values)

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

@@ -12,41 +12,14 @@
       style="width: 100%;height: 100%;overflow: hidden;"
       :style="{ borderRadius: borderRadius}"
     />
-    <div
+
+    <map-controller
       v-if="chart.type === 'map' && showSuspension"
-      class="map-zoom-box"
+      :chart="chart"
-    >
+      :button-text-color="buttonTextColor"
-      <div style="margin-bottom: 0.5em;">
+      @roam-map="roamMap"
-        <el-button
+      @reset-zoom="resetZoom"
-          :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
+    />
-          size="mini"
-          icon="el-icon-plus"
-          circle
-          @click="roamMap(true)"
-        />
-      </div>
-
-      <div style="margin-bottom: 0.5em;">
-        <el-button
-          :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
-          size="mini"
-          icon="el-icon-refresh"
-          circle
-          @click="resetZoom()"
-        />
-      </div>
-
-      <div>
-        <el-button
-          :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
-          size="mini"
-          icon="el-icon-minus"
-          circle
-          @click="roamMap(false)"
-        />
-      </div>
-
-    </div>
     <div
       :class="loading ? 'symbol-map-loading' : 'symbol-map-loaded'"
     />
@@ -81,12 +54,14 @@ import { uuid } from 'vue-uuid'
 import { geoJson } from '@/api/map/map'
 import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
 import { reverseColor } from '../chart/common/common'
+import MapController from './map/MapController.vue'
 import { mapState } from 'vuex'
-
+import bus from '@/utils/bus'
 export default {
   name: 'ChartComponent',
   components: {
-    ViewTrackBar
+    ViewTrackBar,
+    MapController
   },
   props: {
     chart: {
@@ -178,9 +153,11 @@ export default {
     }
   },
   mounted() {
+    bus.$on('change-series-id', this.changeSeriesId)
     this.preDraw()
   },
   beforeDestroy() {
+    bus.$off('change-series-id', this.changeSeriesId)
     window.removeEventListener('resize', this.myChart.resize)
     this.myChart.dispose()
     this.myChart = null
@@ -189,6 +166,15 @@ export default {
     this.loadThemeStyle()
   },
   methods: {
+    changeSeriesId(param) {
+      const { id, seriesId } = param
+      if (id !== this.chart.id) {
+        return
+      }
+      const customAttr = JSON.parse(this.chart.customAttr)
+      customAttr.currentSeriesId = seriesId
+      this.chart.customAttr = JSON.stringify(customAttr)
+    },
     reDrawView() {
       this.myChart.dispatchAction({
         type: 'unselect',

frontend/src/views/chart/components/map/MapController.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="map-zoom-box"
+  >
+    <div style="margin-bottom: 0.5em;">
+      <el-button
+        :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
+        size="mini"
+        icon="el-icon-plus"
+        circle
+        @click="callParent('roamMap', true)"
+      />
+    </div>
+
+    <div style="margin-bottom: 0.5em;">
+      <el-button
+        :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
+        size="mini"
+        icon="el-icon-refresh"
+        circle
+        @click="callParent('resetZoom')"
+      />
+    </div>
+
+    <div>
+      <el-button
+        :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
+        size="mini"
+        icon="el-icon-minus"
+        circle
+        @click="callParent('roamMap', false)"
+      />
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapController',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    },
+    buttonTextColor: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    yaxis() {
+      return JSON.parse(this.chart.yaxis)
+    },
+    layerOption() {
+      return this.yaxis.map(this.buildOption)
+    },
+    customAttr() {
+      const attr = JSON.parse(this.chart.customAttr)
+      if (!attr.currentSeriesId || !this.layerOption.some(item => item.id === attr.currentSeriesId)) {
+        attr.currentSeriesId = this.layerOption[0].id
+      }
+      return attr
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    buildOption({ id, name }) {
+      return ({ id, name })
+    },
+    changeSeriesId(val) {
+      this.chart.customAttr = JSON.stringify(this.customAttr)
+    },
+    callParent(methodName, param) {
+      this.$emit(methodName, param)
+    },
+    init() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/src/views/chart/components/map/MapLayerController.vue

@@ -0,0 +1,126 @@
+<template>
+
+  <el-popover
+    placement="right"
+    title=""
+    width="150"
+    trigger="click"
+  >
+    <i
+      slot="reference"
+      :title="$t('chart.layer_controller')"
+      class="icon iconfont icon-xuanfu"
+      style="margin-left: 4px;cursor: pointer;font-size: 14px;"
+    />
+    <div>
+      <ul class="de-ul">
+        <li
+          v-for="(node, i) in layerOption"
+          :key="node.id"
+          :index="i"
+          class="de-sort-field-span"
+          :class="currentSeriesId === node.id ? 'de-active-li': ''"
+          @click="changeSeries(node)"
+        >
+          <span :title="node.name">{{ node.name }}</span>
+        </li>
+      </ul>
+
+    </div>
+  </el-popover>
+
+</template>
+
+<script>
+import bus from '@/utils/bus'
+export default {
+  name: 'MapLayerController',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentSeriesId: null
+    }
+  },
+  computed: {
+    yaxis() {
+      return JSON.parse(this.chart.yaxis)
+    },
+    layerOption() {
+      return this.yaxis.map(this.buildOption)
+    },
+    customAttr() {
+      const attr = JSON.parse(this.chart.customAttr)
+      if (!attr.currentSeriesId || !this.layerOption.some(item => item.id === attr.currentSeriesId)) {
+        attr.currentSeriesId = this.layerOption[0].id
+      }
+      return attr
+    }
+
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    buildOption({ id, name }) {
+      return ({ id, name })
+    },
+    changeSeries(node) {
+      if (node.id === this.currentSeriesId) return
+      this.currentSeriesId = node.id
+      const param = {
+        id: this.chart.id,
+        seriesId: this.currentSeriesId
+      }
+      bus.$emit('change-series-id', param)
+    },
+
+    init() {
+      this.currentSeriesId = this.customAttr.currentSeriesId
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.de-ul li {
+  margin: 5px 2px;
+  cursor: pointer;
+
+  &:hover {
+    color: #409EFF;
+    border-color: rgb(198, 226, 255);
+    background-color: rgb(236, 245, 255);
+  }
+
+  &:before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+}
+
+.de-active-li {
+  &:before {
+    background: #409EFF;
+  }
+}
+.de-sort-field-span {
+  display: inline-flexbox;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  span {
+    font-size: 12px;
+  }
+}
+</style>

frontend/src/views/chart/view/ChartEdit.vue

@@ -2069,9 +2069,7 @@ export default {
           }
         })
       }
-      if (view.type === 'map' && view.yaxis.length > 1) {
+
-        view.yaxis = [view.yaxis[0]]
-      }
       view.yaxis.forEach(function(ele) {
         if (!ele.chartType) {
           ele.chartType = 'bar'
@@ -2823,7 +2821,7 @@ export default {
     addYaxis(e) {
       this.dragCheckType(this.view.yaxis, 'q')
       this.dragMoveDuplicate(this.view.yaxis, e)
-      if ((this.view.type === 'map' || this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
+      if ((this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
         this.view.yaxis = [this.view.yaxis[0]]
       }
       this.calcData(true)