Merge pull request #5303 from dataease/pr@dev@feat_echarts_map_empty_filter

feat(视图-地图): ECharts 地图支持空值过滤

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

@@ -2,6 +2,7 @@
 import { componentStyle } from '../common/common'
 import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 import { isGradientValue } from '@/components/gradientColorSelector/base'
+import _ from 'lodash'
 const linearCOlor = (start, end) => {
   return {
     type: 'linear',
@@ -146,20 +147,38 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seri
         }
       }
 
+      let senior = chart.senior
+      if (senior) {
+        senior = JSON.parse(senior)
+      }
+      // 空值处理，echarts 对于值为 null 的默认策略是不展示，也就是保持为空，所以只需要处理忽略数据和置为 0 就行
+      // 隐藏和不展示的区别是隐藏不会参与颜色分布的计算，而不展示会参与颜色计算
+      let emptyDataStrategy = senior?.functionCfg?.emptyDataStrategy
+      if (!emptyDataStrategy) {
+        emptyDataStrategy = 'breakLine'
+      }
       for (let i = 0; i < valueArr.length; i++) {
         const y = valueArr[i]
+        if (y.value === null && emptyDataStrategy === 'ignoreData') {
+          continue
+        }
         y.name = chart.data.x[i]
+        if (y.value === null && emptyDataStrategy === 'setZero') {
+          const tmp = _.clone(y)
+          tmp.value = 0
+          chart_option.series[0].data.push(tmp)
+          continue
+        }
         chart_option.series[0].data.push(y)
       }
+
       if (isGradient) {
         chart_option.series[0].data = fillGradientColor(chart_option.series[0].data, customAttr.color.colors)
         delete chart_option.visualMap
       }
 
-      if (chart.senior) {
+      if (senior) {
-        const senior = JSON.parse(chart.senior)
+        senior.mapMapping && senior.mapMapping[curAreaCode] && (chart_option.geo.nameMap = senior.mapMapping[curAreaCode])
-
-        senior && senior.mapMapping && senior.mapMapping[curAreaCode] && (chart_option.geo.nameMap = senior.mapMapping[curAreaCode])
       }
 
       if (chart.data?.detailFields?.length > 1) {

frontend/src/views/chart/components/senior/FunctionCfg.vue

@@ -90,7 +90,7 @@
 
 <script>
 import { DEFAULT_FUNCTION_CFG, COLOR_PANEL } from '../../chart/chart'
-import { includesAny } from '@/utils/StringUtils'
+import { equalsAny, includesAny } from '@/utils/StringUtils'
 
 export default {
   name: 'FunctionCfg',
@@ -108,10 +108,11 @@ export default {
   },
   computed: {
     showSlider() {
-      return this.chart.type !== 'bidirectional-bar'
+      return this.chart.type !== 'bidirectional-bar' && !equalsAny(this.chart.type, 'map')
     },
     showEmptyStrategy() {
-      return this.chart.render === 'antv' && includesAny(this.chart.type, 'line', 'bar', 'area')
+      return (this.chart.render === 'antv' && includesAny(this.chart.type, 'line', 'bar', 'area')) ||
+      this.chart.render === 'echarts' && equalsAny(this.chart.type, 'map')
     }
   },
   watch: {

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

@@ -1958,10 +1958,10 @@ export default {
     },
     showSeniorCfg() {
       return includesAny(this.view.type, 'bar', 'line', 'area', 'mix') ||
-        equalsAny(this.view.type, 'table-normal', 'table-info')
+        equalsAny(this.view.type, 'table-normal', 'table-info', 'map')
     },
     showFunctionCfg() {
-      return includesAny(this.view.type, 'bar', 'line', 'area', 'mix')
+      return includesAny(this.view.type, 'bar', 'line', 'area', 'mix', 'map')
     },
     showScrollCfg() {
       return equalsAny(this.view.type, 'table-normal', 'table-info')