Merge pull request #269 from dataease/pr@dev@feat_图标类型地图

backend/src/main/java/io/dataease/map/dto/entity/AreaEntity.java

 package io.dataease.map.dto.entity;
 
+import com.fasterxml.jackson.annotation.JsonInclude;
 import lombok.Builder;
 import lombok.Data;
 
@@ -10,6 +11,7 @@ import java.util.Optional;
 
 @Data
 @Builder
+@JsonInclude(JsonInclude.Include.NON_NULL)
 public class AreaEntity implements Serializable {
 
     private static final long serialVersionUID = -1326667005437020282L;

backend/src/main/java/io/dataease/map/server/MapServer.java

@@ -5,6 +5,7 @@ import io.dataease.map.api.MapApi;
 import io.dataease.map.dto.entity.AreaEntity;
 import io.dataease.map.service.MapService;
 import io.dataease.map.utils.MapUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RestController;
 import javax.annotation.Resource;
@@ -40,7 +41,9 @@ public class MapServer implements MapApi {
     @Override
     public List<AreaEntity> areaEntitys(@PathVariable String pcode) {
         List<AreaEntity> areaEntities = mapService.areaEntities();
-
+        if (StringUtils.equals(pcode, "0")) {
+            return areaEntities;
+        }
         return mapService.entitysByPid(areaEntities, pcode);
     }
 

frontend/src/api/map/map.js

+import request from '@/utils/request'
+
+export const areaMapping = () => {
+  return request({
+    url: '/api/map/areaEntitys/0',
+    method: 'get',
+    loading: true
+  })
+}
+
+export function geoJson(areaCode) {
+  return request({
+    url: '/api/map/resourceFull/' + areaCode,
+    method: 'get',
+    loading: true
+  })
+}

frontend/src/icons/svg/map.svg

+<svg t="1626859344070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="819" width="200" height="200"><path d="M948.3 170.5c-7.2-6.1-17.4-8.7-26.6-7.2l-237.1 42-60.4-20c-17.4-5.6-35.8 3.6-41.5 20.5-5.6 16.9 3.6 35.8 20.5 41.5l68.6 22.5c1.5 0.5 3.1 1 4.6 1v265.7L541.2 495c-11.8-3.6-23.6 3.1-27.1 14.3s3.1 23.6 14.3 27.1l148 45.6v273.9L392.8 776V652.8c0-12.3-9.7-22-22-22s-22 9.7-22 22v123.9L130.7 811V195.1c0-17.9-14.8-32.8-32.8-32.8s-32.8 14.8-32.8 32.8v654.3c0 9.7 4.1 18.4 11.3 25.1 7.2 6.1 16.9 9.2 26.1 7.7l270.8-42.5 304.1 85.5c3.1 1 5.6 1 8.7 1 2 0 4.1 0 5.6-0.5l240.1-43.5c15.4-3.1 26.6-16.4 26.6-32.3V195.6c1.7-9.7-2.9-19-10.1-25.1z" p-id="820"></path><path d="M376.4 97.8c-102.4 0-185.3 82.9-185.3 185.3 0 28.2 6.7 55.8 20.5 82.9 10.8 21 109.1 159.7 138.8 201.7 6.1 8.7 15.9 13.8 26.6 13.8 10.8 0 20.5-5.1 26.6-13.8 29.7-42.5 127.5-181.8 137.7-201.2 13.3-25.6 20.5-54.8 20.5-83.5 0-102.3-83-185.2-185.4-185.2z m0.5 240.1c-30.2 0-54.8-24.6-54.8-54.8s24.1-54.8 54.8-54.8c30.2 0 54.8 24.6 54.8 54.8s-24.6 54.8-54.8 54.8z" p-id="821"></path></svg>
\ No newline at end of file

frontend/src/lang/en.js

@@ -750,6 +750,7 @@ export default {
     chart_funnel: 'Funnel',
     chart_radar: 'Radar',
     chart_gauge: 'Gauge',
+    chart_map: 'Map',
     dateStyle: 'Date Style',
     datePattern: 'Date Format',
     y: 'Year',
@@ -817,7 +818,10 @@ export default {
     drag_block_funnel_width: 'Funnel Width',
     drag_block_funnel_split: 'Funnel Split',
     drag_block_radar_length: 'Branch Length',
-    drag_block_radar_label: 'Branch Label'
+    drag_block_radar_label: 'Branch Label',
+    map_range: 'Map range',
+    select_map_range: 'Please select map range',
+    area: 'Area'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -750,6 +750,7 @@ export default {
     chart_funnel: '漏鬥圖',
     chart_radar: '雷達圖',
     chart_gauge: '儀表盤',
+    chart_map: '地圖',
     dateStyle: '日期顯示',
     datePattern: '日期格式',
     y: '年',
@@ -817,7 +818,10 @@ export default {
     drag_block_funnel_width: '漏鬥層寬',
     drag_block_funnel_split: '漏鬥分層',
     drag_block_radar_length: '分支長度',
-    drag_block_radar_label: '分支標簽'
+    drag_block_radar_label: '分支標簽',
+    map_range: '地圖範圍',
+    select_map_range: '請選擇地圖範圍',
+    area: '地區'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -750,6 +750,7 @@ export default {
     chart_funnel: '漏斗图',
     chart_radar: '雷达图',
     chart_gauge: '仪表盘',
+    chart_map: '地图',
     dateStyle: '日期显示',
     datePattern: '日期格式',
     y: '年',
@@ -817,7 +818,10 @@ export default {
     drag_block_funnel_width: '漏斗层宽',
     drag_block_funnel_split: '漏斗分层',
     drag_block_radar_length: '分支长度',
-    drag_block_radar_label: '分支标签'
+    drag_block_radar_label: '分支标签',
+    map_range: '地图范围',
+    select_map_range: '请选择地图范围',
+    area: '地区'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

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

@@ -528,3 +528,37 @@ export const BASE_CHART = {
   },
   customFilter: []
 }
+
+export const BASE_MAP = {
+  title: {
+    text: '',
+    textStyle: {
+      fontWeight: 'normal'
+    }
+  },
+
+  tooltip: {},
+  visualMap: {
+    min: 50,
+    max: 52,
+    text: ['High', 'Low'],
+    realtime: false,
+    calculable: true,
+    inRange: {
+      color: ['lightskyblue', 'yellow', 'orangered']
+    }
+  },
+  //   legend: {},
+  series: [
+    {
+      name: '',
+      type: 'map',
+      map: 'HK',
+      roam: true,
+      //   label: {
+      //     show: true
+      //   },
+      data: []
+    }
+  ]
+}

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

@@ -29,7 +29,7 @@ export function componentStyle(chart_option, chart) {
       customStyle.text.isBolder ? style.fontWeight = 'bold' : style.fontWeight = 'normal'
       chart_option.title.textStyle = style
     }
-    if (customStyle.legend) {
+    if (customStyle.legend && chart_option.legend) {
       chart_option.legend.show = customStyle.legend.show
       // 水平方向
       if (customStyle.legend.hPosition === 'left') {

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

+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { componentStyle } from '../common/common'
+
+export function baseMapOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    if (chart.data.series.length > 0) {
+      chart_option.series[0].name = chart.data.series[0].name
+      // size
+      if (customAttr.size) {
+        chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
+      }
+      // label
+      if (customAttr.label) {
+        chart_option.series[0].label = customAttr.label
+        chart_option.series[0].labelLine = customAttr.label.labelLine
+      }
+      // visualMap
+      const valueArr = chart.data.series[0].data
+      chart_option.visualMap.min = Math.min(...valueArr)
+      chart_option.visualMap.max = Math.max(...valueArr)
+      if (customAttr.color && customAttr.color.colors) {
+        chart_option.visualMap.inRange.color = customAttr.color.colors
+      }
+      for (let i = 0; i < valueArr.length; i++) {
+        const y = {
+          name: chart.data.x[i],
+          value: valueArr[i]
+        }
+        // color
+        y.itemStyle = {
+          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha),
+          borderRadius: 0
+        }
+        chart_option.series[0].data.push(y)
+      }
+    }
+  }
+  // console.log(chart_option);
+  componentStyle(chart_option, chart)
+  return chart_option
+}
+

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

@@ -5,15 +5,17 @@
 </template>
 
 <script>
-import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE } from '../chart/chart'
+import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE, BASE_MAP } from '../chart/chart'
 import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
 import { baseLineOption, stackLineOption } from '../chart/line/line'
 import { basePieOption, rosePieOption } from '../chart/pie/pie'
+import { baseMapOption } from '../chart/map/map'
 import { baseFunnelOption } from '../chart/funnel/funnel'
 import { baseRadarOption } from '../chart/radar/radar'
 import { baseGaugeOption } from '../chart/gauge/gauge'
-import eventBus from '@/components/canvas/utils/eventBus'
+// import eventBus from '@/components/canvas/utils/eventBus'
 import { uuid } from 'vue-uuid'
+import { geoJson } from '@/api/map/map'
 
 export default {
   name: 'ChartComponent',
@@ -93,6 +95,29 @@ export default {
       } else if (chart.type === 'gauge') {
         chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
       }
+
+      if (chart.type === 'map') {
+        const customAttr = JSON.parse(chart.customAttr)
+        if (!customAttr.areaCode) return
+
+        let areaJson
+        if ((areaJson = localStorage.getItem('areaJson' + customAttr.areaCode)) !== null) {
+          this.initMapChart(areaJson, chart)
+          return
+        }
+        geoJson(customAttr.areaCode).then(res => {
+          this.initMapChart(res.data, chart)
+          // localStorage最大容量只有5M，先取消缓存
+          // localStorage.setItem('areaJson' + customAttr.areaCode, res.data)
+        })
+        return
+      }
+      this.myEcharts(chart_option)
+    },
+    initMapChart(geoJson, chart) {
+      this.$echarts.registerMap('HK', geoJson)
+      const base_json = JSON.parse(JSON.stringify(BASE_MAP))
+      const chart_option = baseMapOption(base_json, chart)
       this.myEcharts(chart_option)
     },
     myEcharts(option) {