diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 25b023081a..77b17ba08f 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -558,6 +558,12 @@ public class ChartViewService {
         return data;
     }
 
+    public Boolean containDetailField(ChartViewDTO view) {
+        List<String> detailFieldViewTypes = new ArrayList<>();
+        detailFieldViewTypes.add("map");
+        return detailFieldViewTypes.contains(view.getType());
+    }
+
     public ChartViewDTO calcData(ChartViewDTO view, ChartExtRequest chartExtRequest, boolean cache) throws Exception {
         ChartViewDTO chartViewDTO = new ChartViewDTO();
         if (ObjectUtils.isEmpty(view)) {
@@ -906,6 +912,9 @@ public class ChartViewService {
         pageInfo.setGoPage(chartExtRequest.getGoPage());
         pageInfo.setPageSize(chartExtRequest.getPageSize());
 
+        List<ChartViewFieldDTO> detailFieldList = new ArrayList<>();
+        String detailFieldSql = null;
+        List<String[]> detailData = new ArrayList<>();
         //如果不是插件视图 走原生逻辑
         if (table.getMode() == 0) {// 直连
             if (ObjectUtils.isEmpty(ds)) {
@@ -931,6 +940,11 @@ public class ChartViewService {
                     totalPageSql = qp.getResultCount(true, dataTableInfoDTO.getTable(), xAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view);
                 } else {
                     querySql = qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view);
+                    if (containDetailField(view) && CollectionUtils.isNotEmpty(viewFields)) {
+                        detailFieldList.addAll(xAxis);
+                        detailFieldList.addAll(viewFields);
+                        detailFieldSql = qp.getSQLWithPage(true, dataTableInfoDTO.getTable(), detailFieldList, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view, pageInfo);
+                    }
                 }
             } else if (StringUtils.equalsIgnoreCase(table.getType(), DatasetType.SQL.name())) {
                 String sql = dataTableInfoDTO.isBase64Encryption() ? new String(java.util.Base64.getDecoder().decode(dataTableInfoDTO.getSql())) : dataTableInfoDTO.getSql();
@@ -994,6 +1008,11 @@ public class ChartViewService {
                 logger.info(datasourceAssistRequest.getQuery());
                 assistData = datasourceProvider.getData(datasourceAssistRequest);
             }
+
+            if (StringUtils.isNotBlank(detailFieldSql)) {
+                datasourceRequest.setQuery(detailFieldSql);
+                detailData = datasourceProvider.getData(datasourceRequest);
+            }
         } else if (table.getMode() == 1) {// 抽取
             // 连接doris，构建doris数据源查询
             datasourceRequest.setDatasource(ds);
@@ -1200,6 +1219,9 @@ public class ChartViewService {
         }
         // table组件，明细表，也用于导出数据
         Map<String, Object> mapTableNormal = ChartDataBuild.transTableNormal(xAxis, yAxis, view, data, extStack, desensitizationList);
+        if (CollectionUtils.isNotEmpty(detailData)) {
+            mapTableNormal = ChartDataBuild.transTableNormalWithDetail(xAxis, yAxis, data, detailFieldList, detailData, desensitizationList);
+        }
         chartViewDTO = uniteViewResult(datasourceRequest.getQuery(), mapChart, mapTableNormal, view, isDrill, drillFilters, dynamicAssistFields, assistData);
         chartViewDTO.setTotalPage(totalPage);
         chartViewDTO.setTotalItems(totalItems);
diff --git a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java b/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
index 71e32cb73f..9ac2538320 100644
--- a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
+++ b/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
@@ -1,5 +1,6 @@
 package io.dataease.service.chart.util;
 
+import cn.hutool.core.util.ArrayUtil;
 import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
 import io.dataease.dto.chart.*;
 import io.dataease.plugins.common.dto.chart.ChartViewFieldDTO;
@@ -952,6 +953,46 @@ public class ChartDataBuild {
         return transTableNormal(fields, view, data, desensitizationList);
     }
 
+    public static Map<String, Object> transTableNormalWithDetail(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<String[]> data, List<ChartViewFieldDTO> detailFields, List<String[]> detailData, Map<String, ColumnPermissionItem> desensitizationList) {
+        int detailIndex = xAxis.size();
+
+        List<ChartViewFieldDTO> realDetailFields = detailFields.subList(detailIndex, detailFields.size());
+
+        List<ChartViewFieldDTO> fields = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(xAxis))
+            fields.addAll(xAxis);
+        if (CollectionUtils.isNotEmpty(yAxis))
+            fields.addAll(yAxis);
+        Map<String, Object> map = transTableNormal(fields, null, data, desensitizationList);
+        List<Map<String, Object>> tableRow = (List<Map<String, Object>>) map.get("tableRow");
+        final int xEndIndex = detailIndex;
+        Map<String, List<String[]>> groupDataList = detailData.stream().collect(Collectors.groupingBy(item -> ArrayUtil.join(ArrayUtil.sub(item, 0, xEndIndex), "-de-", "(", ")")));
+
+        tableRow.forEach(row -> {
+            String key = xAxis.stream().map(x -> row.get(x.getDataeaseName()).toString()).collect(Collectors.joining("-de-", "(", ")"));
+            List<String[]> detailFieldValueList = groupDataList.get(key);
+            List<Map<String, Object>> detailValueMapList = detailFieldValueList.stream().map((detailArr -> {
+                Map<String, Object> temp = new HashMap<>();
+                for (int i = 0; i < realDetailFields.size(); i++) {
+                    ChartViewFieldDTO realDetailField = realDetailFields.get(i);
+                    temp.put(realDetailField.getDataeaseName(), detailArr[detailIndex + i]);
+                }
+                return temp;
+            })).collect(Collectors.toList());
+            row.put("details", detailValueMapList);
+        });
+
+        ChartViewFieldDTO detailFieldDTO = new ChartViewFieldDTO();
+        detailFieldDTO.setId("DataEase-Detail");
+        detailFieldDTO.setName("detail");
+        detailFieldDTO.setDataeaseName("detail");
+        fields.add(detailFieldDTO);
+        map.put("fields", fields);
+        map.put("detailFields", realDetailFields);
+        map.put("tableRow", tableRow);
+        return map;
+    }
+
     // 表格
     public static Map<String, Object> transTableNormal(Map<String, List<ChartViewFieldDTO>> fieldMap, ChartViewWithBLOBs view, List<String[]> data, Map<String, ColumnPermissionItem> desensitizationList) {
 
diff --git a/frontend/src/components/deIconPicker/eIcon/e-icon.vue b/frontend/src/components/deIconPicker/eIcon/e-icon.vue
new file mode 100644
index 0000000000..c5de26eb24
--- /dev/null
+++ b/frontend/src/components/deIconPicker/eIcon/e-icon.vue
@@ -0,0 +1,86 @@
+<template>
+  <i
+    v-if="fontClass"
+    :class="iconName"
+    @click="click(iconName,$event)"
+  />
+  <svg
+    v-else-if="svg"
+    :class="svgClass"
+    aria-hidden="true"
+    @click="click(iconName,$event)"
+  >
+    <use :xlink:href="iconName" />
+  </svg>
+  <div
+    v-else-if="isExternal"
+    :style="styleExternalIcon"
+    :class="className"
+    class="icon external-icon"
+    @click="click(iconName,$event)"
+  />
+</template>
+
+<script>
+import { isExternal } from '../utils/index'
+
+export default {
+  name: 'EIcon',
+  props: {
+    iconName: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    fontClass() {
+      return this.iconName && this.iconName.trim().length > 2 && (!isExternal(this.iconName) && !this.iconName.startsWith('#'))
+    },
+    svg() {
+      return this.iconName && this.iconName.trim().length > 2 && (!isExternal(this.iconName) && this.iconName.startsWith('#'))
+    },
+    isExternal() {
+      return isExternal(this.iconName)
+    },
+    svgClass() {
+      if (this.className) {
+        return 'icon ' + this.className
+      } else {
+        return 'icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        'background-image': `url(${this.iconName})`,
+        'background-repeat': 'no-repeat',
+        'background-size': '100% 100%',
+        '-moz-background-size': '100% 100%'
+      }
+    }
+  },
+  methods: {
+    click(iconName, event) {
+      if (event) event.preventDefault()
+      this.$emit('click', iconName)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.external-icon {
+  display: inline-block;
+}
+</style>
diff --git a/frontend/src/components/deIconPicker/eIconList.js b/frontend/src/components/deIconPicker/eIconList.js
new file mode 100644
index 0000000000..565a38c7c2
--- /dev/null
+++ b/frontend/src/components/deIconPicker/eIconList.js
@@ -0,0 +1 @@
+export default ['xianxingbenzitubiao1', 'xianxinganquansuotubiao', 'xianxingbenzitubiao2', 'xianxingdianzantubiao', 'xianxingdiannaotubiao', 'xianxingjishibentubiao', 'xianxingdianhuatubiao', 'xianxinghuishouzhantubiao', 'xianxingWIFItubiao', 'xianxingduihuakuangtubiao', 'xianxinglajitongtubiao', 'xianxingjiangpaitubiao2', 'xianxingjiaoyoutubiao', 'xianxingquerentubiao', 'xianxingrenwutubiao', 'xianxingjiangpaitubiao1', 'xianxingshoujitubiao', 'xianxinglianxirentubiao', 'xianxingrenyuantubiao', 'xianxinggongjutubiao', 'xianxingshenfentubiao', 'xianxingxiangjitubiao', 'xianxingwendatubiao', 'xianxingyanjingtubiao', 'xianxingxinxitubiao', 'xianxingxinjiantubiao', 'xianxingtudingtubiao', 'xianxingshijiantubiao', 'xianxingqianbaotubiao', 'xianxingtupiantubiao', 'xianxingzhifubaotubiao', 'xianxingyoujiantubiao', 'xianxingzhifeijitubiao', 'xianxingyuantubiao', 'xianxingxiangfatubiao', 'diannao-01', 'jiaojuan-01', 'shuji-01', 'gujianzhu-01', 'simiao-01', 'yundong-yumaoqiu', 'sanjiaojia-01', 'zhaoxiangji-01', 'shuihu-01', 'yumaopai-01', 'yanjing-01', 'chalaoban-01', 'shouji-01', 'yinzhang-01', 'xiangyan-01', 'guangpan-01', 'kafei-01', 'erji-01', 'foling-01', 'xiong-01', 'bingxiang', 'diannao', 'chufangcheng', 'biludianshi', 'dayinji', 'guangpan', 'jiashiqi', 'fengshan', 'kongtiao', 'dianfanbao', 'fengrenji', 'dianzicheng', 'mensuo', 'shexiangji', 'saodijiqiren', 'lvshuiji', 'shuzhuodeng', 'kafeiji', 'jisuanqi', 'xiyiji', 'shexiangtou'].map(s => 'eiconfont e-icon-' + s)
diff --git a/frontend/src/components/deIconPicker/elementUI.js b/frontend/src/components/deIconPicker/elementUI.js
new file mode 100644
index 0000000000..65ee23694f
--- /dev/null
+++ b/frontend/src/components/deIconPicker/elementUI.js
@@ -0,0 +1 @@
+export default ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round'].map(s => 'el-icon-' + s)
diff --git a/frontend/src/components/deIconPicker/fontAwesome.js b/frontend/src/components/deIconPicker/fontAwesome.js
new file mode 100644
index 0000000000..d6b6a0553c
--- /dev/null
+++ b/frontend/src/components/deIconPicker/fontAwesome.js
@@ -0,0 +1 @@
+export default ['slack', 'arrows-alt', 'wpexplorer', 'video-camera', 'cutlery', 'times-rectangle-o', 'coffee', 'play-circle', 'chain', 'hand-rock-o', 'list-ul', 'sitemap', 'step-backward', 'columns', 'arrow-left', 'fa', 'italic', 'turkish-lira', 'github-square', 'mobile', 'file-o', 'paw', 'tree', 'remove', 'adn', 'google-plus', 'external-link', 'maxcdn', 'battery-three-quarters', 'cc', 'wpbeginner', 'universal-access', 'hand-grab-o', 'vine', 'hacker-news', 'sticky-note', 'caret-square-o-right', 'yahoo', 'shopping-basket', 'code-fork', 'user', 'codepen', 'reorder', 'cc-mastercard', 'laptop', 'sheqel', 'chevron-circle-left', 'meh-o', 'spoon', 'cloud', 'file-pdf-o', 'th-list', 'address-book-o', 'quote-right', 'battery-2', 'battery-1', 'bookmark', 'battery-4', 'file-sound-o', 'battery-3', 'caret-square-o-up', 'xing', 'battery-0', 'upload', 'commenting-o', 'chevron-circle-right', 'times', 'pie-chart', 'leanpub', 'glass', 'toggle-left', 'hand-o-right', 'file-code-o', 'hand-spock-o', 'asl-interpreting', 'pencil', 'calendar', 'i-cursor', 'shirtsinbulk', 'caret-up', 'snapchat-ghost', 'user-circle', 'user-times', 'tencent-weibo', 'close', 'tags', 'skype', 'ge', 'digg', 'ravelry', 'binoculars', 'gg', 'soccer-ball-o', 'google', 'beer', 'contao', 'mars-stroke', 'cube', 'align-justify', 'file-archive-o', 'toggle-on', 'whatsapp', 'suitcase', 'pencil-square', 'font', 'eercast', 'trello', 'calendar-plus-o', 'arrow-circle-left', 'pencil-square-o', 'connectdevelop', 'bullhorn', 'thermometer-half', 'chevron-left', 'stack-exchange', 'book', 'arrows', 'window-close-o', 'shekel', 'git', 'scissors', 'fast-forward', 'cc-amex', 'car', 'tint', 'outdent', 'flickr', 'arrow-up', 'music', 'mercury', 'html5', 'microphone-slash', 'simplybuilt', 'inr', 'send-o', 'krw', 'long-arrow-up', 'thumbs-down', 'diamond', 'bolt', 'hand-pointer-o', 'bomb', 'paste', 'birthday-cake', 'jsfiddle', 'file-movie-o', 'tag', 'youtube', 'thumbs-o-up', 'keyboard-o', 'hand-peace-o', 'blind', 'list-ol', 'id-card', 'cab', 'delicious', 'file-powerpoint-o', 'dollar', 'shield fa-rotate-270', 'ils', 'backward', 'etsy', 'circle-thin', 'copyright', 'folder', 'group', 'spotify', 'television', 'vimeo', 'hospital-o', 'volume-control-phone', 'sort-desc', 'mail-forward', 'twitter', 'bluetooth-b', 'chevron-circle-up', 'ioxhost', 'at', 'pause', 'angle-left', 'quora', 'eraser', 'rss-square', 'thermometer-three-quarters', 'hdd-o', 'gittip', 'mobile-phone', 'users', 'assistive-listening-systems', 'caret-square-o-down', 'unlock', 'play', 'superscript', 'chevron-right', 'sign-in', 'paint-brush', 'youtube-play', 'odnoklassniki', 'empire', 'deafness', 'arrow-circle-up', 'photo', 'reddit-alien', 'shopping-cart', 'fire-extinguisher', 'share-square', 'picture-o', 'cc-diners-club', 'square', 'times-circle-o', 'wechat', 'search-plus', 'window-restore', 'sort-alpha-asc', 'gbp', 'font-awesome', 'facebook-official', 'quote-left', 'thumbs-o-down', 'hand-scissors-o', 'linux', 'steam', 'building', 'soundcloud', 'sticky-note-o', 'amazon', 'eye-slash', 'lightbulb-o', 'arrow-circle-o-left', 'align-right', 'long-arrow-right', 'bar-chart-o', 'modx', 'android', 'times-rectangle', 'cc-discover', 'star-half-o', 'firefox', 'snowflake-o', 'glide-g', 'paypal', 'pied-piper-alt', 'cloud-download', 'circle-o', 'github', 'gratipay', 'underline', 'key', 'magic', 'caret-right', 'grav', 'facebook-f', 'address-card', 'object-group', 'google-plus-square', 'btc', 'viacoin', 'address-book', 'battery', 'windows', 'bus', 'sun-o', 'strikethrough', 'tablet', 'bold', 'life-bouy', 'image', 'align-left', 'crop', 'microphone', 'bug', 'wpforms', 'slideshare', 'xing-square', 'transgender', 'hotel', 'file-image-o', 'battery-half', 'pause-circle-o', 'indent', 'share-square-o', 'codiepie', 'rotate-left', 'toggle-right', 'behance-square', 'exchange', 'mail-reply-all', 'ship', 'exclamation', 'umbrella', 'meanpath', 'warning', 'spinner', 'exclamation-circle', 'google-plus-circle', 'share-alt-square', 'external-link-square', 'wheelchair-alt', 'low-vision', 'step-forward', 'asterisk', 'angle-double-down', 'sort-amount-asc', 'arrows-v', 'support', 's15', 'undo', 'signing', 'tachometer', 'long-arrow-left', 'comment-o', 'flask', 'flash', 'youtube-square', 'arrows-h', 'steam-square', 'dedent', 'hard-of-hearing', 'dashcube', 'language', 'newspaper-o', 'trophy', 'forumbee', 'genderless', 'angle-double-right', 'imdb', 'automobile', 'list', 'calendar-check-o', 'heart', 'pinterest', 'vcard', 'pinterest-square', 'flag-checkered', 'user-circle-o', 'mars-double', 'circle', 'envelope-square', 'briefcase', 'check-circle', 'check-square', 'houzz', 'calendar-o', 'paperclip', 'caret-left', 'money', 'id-badge', 'expeditedssl', 'calendar-times-o', 'credit-card', 'sort-down', 'map', 'clock-o', 'rupee', 'usd', 'save', 'terminal', 'venus-mars', 'bicycle', 'graduation-cap', 'usb', 'window-close', 'shield fa-rotate-90', 'database', 'yelp', 'thermometer-empty', 'text-height', 'gear', 'share-alt', 'star-half-empty', 'intersex', 'sort-alpha-desc', 'reddit-square', 'retweet', 'foursquare', 'sellsy', 'minus', 'share', 'neuter', 'phone-square', 'volume-down', 'paper-plane-o', 'linode', 'gift', 'bluetooth', 'floppy-o', 'gears', 'arrow-circle-right', 'hand-o-left', 'weixin', 'crosshairs', 'bell-o', 'puzzle-piece', 'industry', 'stack-overflow', 'tasks', 'drupal', 'hand-o-down', 'battery-full', 'smile-o', 'align-center', 'link', 'power-off', 'stop', 'chevron-circle-down', 'handshake-o', 'moon-o', 'resistance', 'y-combinator-square', 'hourglass-start', 'signal', 'paper-plane', 'desktop', 'life-buoy', 'microchip', 'qrcode', 'random', 'won', 'bitcoin', 'arrow-circle-o-up', 'user-md', 'git-square', 'adjust', 'search-minus', 'odnoklassniki-square', 'battery-empty', 'pied-piper-pp', 'opencart', 'camera', 'square-o', 'sort-asc', 'info-circle', 'eyedropper', 'instagram', 'lastfm', 'folder-open-o', 'thermometer-4', 'star-o', 'bell-slash', 'google-wallet', 'angle-down', 'file-audio-o', 'sort-numeric-desc', 'plus-square-o', 'reply', 'chevron-up', 'mixcloud', 'bed', 'question-circle-o', 'cc-jcb', 'chevron-down', 'thermometer-full', 'trash', 'arrow-circle-down', 'forward', 'file-word-o', 'id-card-o', 'podcast', 'glide', 'comments-o', 'wheelchair', 'long-arrow-down', 'unlink', 'snapchat-square', 'location-arrow', 'ban', 'envelope-open-o', 'google-plus-official', 'file-video-o', 'window-minimize', 'caret-down', 'thermometer-1', 'thermometer-0', 'thermometer-3', 'thermometer-2', 'bar-chart', 'question-circle', 'black-tie', 'cloud-upload', 'tripadvisor', 'file-text-o', 'lemon-o', 'wordpress', 'mars', 'first-order', 'envelope-open', 'barcode', 'expand', 'plane', 'arrow-right', 'map-marker', 'euro', 'unsorted', 'joomla', 'bath', 'meetup', 'chrome', 'repeat', 'toggle-down', 'rouble', 'download', 'life-ring', 'shield fa-flip-vertical', 'globe', 'jpy', 'arrow-down', 'shield', 'balance-scale', 'apple', 'fort-awesome', 'tumblr', 'file-photo-o', 'stop-circle-o', 'stumbleupon', 'header', 'twitch', 'venus', 'openid', 'institution', 'question', 'chain-broken', 'recycle', 'skyatlas', 'file-excel-o', 'bars', 'hand-stop-o', 'frown-o', 'paragraph', 'print', 'circle-o-notch', 'clipboard', 'inbox', 'sign-out', 'navicon', 'drivers-license-o', 'legal', 'leaf', 'flag', 'hand-lizard-o', 'bookmark-o', 'copy', 'scribd', 'mars-stroke-v', 'shield fa-rotate-180', 'life-saver', 'envelope', 'sort-amount-desc', 'comments', '500px', 'reply-all', 'map-pin', 'send', 'arrow-circle-o-right', 'university', 'credit-card-alt', 'road', 'trash-o', 'cart-plus', 'futbol-o', 'fax', 'wifi', 'user-o', 'percent', 'mars-stroke-h', 'refresh', 'medkit', 'safari', 'server', 'mouse-pointer', 'files-o', 'dot-circle-o', 'buysellads', 'gamepad', 'train', 'times-circle', 'angle-double-up', 'braille', 'product-hunt', 'cubes', 'eject', 'cc-stripe', 'address-card-o', 'yen', 'pagelines', 'battery-quarter', 'code', 'rebel', 'wikipedia-w', 'th-large', 'thermometer', 'history', 'unlock-alt', 'angellist', 'minus-circle', 'edit', 'hourglass-half', 'phone', 'vk', 'user-secret', 'male', 'internet-explorer', 'plus', 'shower', 'sort', 'rotate-right', 'dropbox', 'feed', 'bullseye', 'sign-language', 'comment', 'level-up', 'heart-o', 'themeisle', 'subscript', 'wrench', 'file-text', 'shield fa-flip-horizontal', 'american-sign-language-interpreting', 'edge', 'building-o', 'tv', 'certificate', 'reddit', 'th', 'viadeo-square', 'calculator', 'minus-square-o', 'archive', 'rocket', 'sort-numeric-asc', 'caret-square-o-left', 'cogs', 'twitter-square', 'heartbeat', 'headphones', 'cc-visa', 'anchor', 'motorcycle', 'shopping-bag', 'viadeo', 'angle-up', 'superpowers', 'tumblr-square', 'commenting', 'rss', 'play-circle-o', 'flag-o', 'mail-reply', 'gg-circle', 'thermometer-quarter', 'rub', 'sort-up', 'pinterest-p', 'volume-up', 'text-width', 'get-pocket', 'level-down', 'renren', 'css3', 'bathtub', 'vimeo-square', 'taxi', 'gitlab', 'fast-backward', 'area-chart', 'stethoscope', 'pause-circle', 'deviantart', 'h-square', 'weibo', 'fire', 'angle-right', 'cart-arrow-down', 'bank', 'cut', 'mortar-board', 'yc', 'toggle-off', 'window-maximize', 'star', 'exclamation-triangle', 'eye', 'trademark', 'bitbucket', 'stumbleupon-circle', 'compass', 'female', 'folder-o', 'audio-description', 'home', 'envelope-o', 'filter', 'registered', 'check-square-o', 'bitbucket-square', 'map-o', 'vcard-o', 'dribbble', 'bandcamp', 'snapchat', 'arrow-circle-o-down', 'plus-circle', 'bell', 'venus-double', 'transgender-alt', 'envira', 'yc-square', 'tty', 'compress', 'fonticons', 'toggle-up', 'space-shuttle', 'truck', 'street-view', 'folder-open', 'hashtag', 'facebook-square', 'minus-square', 'file-zip-o', 'cc-paypal', 'hourglass-end', 'subway', 'info', 'facebook', 'eur', 'github-alt', 'search', 'clone', 'try', 'thumb-tack', 'behance', 'linkedin', 'ellipsis-h', 'ra', 'hand-o-up', 'hourglass-o', 'star-half-full', 'object-ungroup', 'creative-commons', 'qq', 'fighter-jet', 'file-picture-o', 'linkedin-square', 'opera', 'plus-square', 'y-combinator', 'magnet', 'rmb', 'user-plus', 'ambulance', 'sliders', 'free-code-camp', 'file', 'child', 'ticket', 'pied-piper', 'gavel', 'list-alt', 'film', 'cog', 'line-chart', 'check-circle-o', 'cny', 'ellipsis-v', 'plug', 'thumbs-up', 'yoast', 'optin-monster', 'lastfm-square', 'medium', 'hourglass-1', 'drivers-license', 'table', 'hourglass-2', 'hourglass-3', 'ruble', 'check', 'stop-circle', 'lock', 'calendar-minus-o', 'bell-slash-o', 'star-half', 'angle-double-left', 'hourglass', 'telegram', 'map-signs', 'camera-retro', 'dashboard', 'hand-paper-o', 'volume-off'].map(s => 'fa fa-' + s)
diff --git a/frontend/src/components/deIconPicker/iconList.js b/frontend/src/components/deIconPicker/iconList.js
new file mode 100644
index 0000000000..aadb561162
--- /dev/null
+++ b/frontend/src/components/deIconPicker/iconList.js
@@ -0,0 +1,48 @@
+import { TypeUtil } from './utils/index'
+import fontAwesome from './fontAwesome'
+import elementUI from './elementUI'
+import eIconList from './eIconList'
+
+const add = function(list, item) {
+  let arr = []
+  if (item && TypeUtil.isArray(item)) {
+    arr = list.concat(item)
+  } else if (item && TypeUtil.isString(item)) {
+    arr = arr.concat(list)
+    arr.push(item)
+  }
+  return arr
+}
+
+const remove = function(list, item) {
+  if (item && TypeUtil.isArray(item)) {
+    for (let i = 0; i < item.length; i++) {
+      for (let j = 0; j < list.length; j++) {
+        if (list[j] === item[i]) {
+          list.splice(j, 1)
+          j--
+        }
+      }
+    }
+  } else if (item && TypeUtil.isString(item)) {
+    list = list.filter(function(i) {
+      return i !== item
+    })
+  }
+  return list
+}
+
+const iconList = {
+  list: [],
+
+  addIcon: function(item) {
+    this.list = add(this.list, item)
+  },
+
+  removeIcon: function(item) {
+    this.list = remove(this.list, item)
+  }
+}
+
+export { fontAwesome, elementUI, eIconList }
+export default iconList
diff --git a/frontend/src/components/deIconPicker/index.vue b/frontend/src/components/deIconPicker/index.vue
new file mode 100644
index 0000000000..f47284928e
--- /dev/null
+++ b/frontend/src/components/deIconPicker/index.vue
@@ -0,0 +1,539 @@
+<template>
+  <div class="ui-fas">
+    <div
+      v-if="!!name"
+      class="selected-icon-container"
+    >
+      <span
+        title="icon"
+        :style="{color: color}"
+      >
+        <e-icon
+          :icon-name="name"
+          :title="name"
+          class="e-icon"
+        />
+      </span>
+    </div>
+    <el-popover
+      ref="popover"
+      v-model="visible"
+      :disabled="disabled"
+      :placement="myPlacement"
+      popper-class="el-icon-popper"
+      :width="popoverWidth"
+      show-arrow
+      trigger="manual"
+      @show="setTempSelected"
+    >
+      <template slot="reference">
+        <slot
+          name="default"
+          :data="{prefixIcon,visible,placeholder,disabled,clearable,readonly,size}"
+        >
+
+          <el-input
+            ref="input"
+            v-model="proxyValue"
+            class="de-icon-picker-input"
+            :placeholder="dynamicPlaceholder"
+            :style="styles"
+            :clearable="clearable"
+            :disabled="disabled"
+            :readonly="true"
+            :size="size"
+            @input="_change"
+            @clear="_initIcon(false)"
+            @focus="_popoverShowFun(false)"
+          >
+            <template
+              v-if="showPrefix"
+              slot="prepend"
+            >
+              <slot
+                name="prepend"
+                :icon="prefixIcon"
+              >
+                <e-icon
+                  :icon-name="prefixIcon"
+                  class="e-icon"
+                />
+              </slot>
+            </template>
+          </el-input>
+        </slot>
+      </template>
+      <div class="de-icon-picker-container">
+        <div class="top-container">
+          <el-color-picker
+            v-model="curColor"
+            show-alpha
+            @change="colorChange"
+          />
+
+          <div class="top-sure-button-div">
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-check"
+              @click.stop="sure"
+            />
+          </div>
+
+        </div>
+        <el-divider class="top-divider" />
+
+        <el-scrollbar
+          v-if="!destroy"
+          ref="eScrollbar"
+          tag="div"
+          wrap-class="el-select-dropdown__wrap"
+          view-class="el-select-dropdown__list"
+          :class="'is-empty-'+id"
+        >
+          <ul
+            v-if="dataList && dataList.length > 0"
+            ref="fasIconList"
+            class="fas-icon-list"
+          >
+            <li
+              v-for="(item, index) in dataList"
+              :key="index"
+              class="picker-li"
+              :style="tempSelected === item && (highLightColor !== '' || !!curColor) ? {color: highLightColor || curColor, border: '1px solid ' + curColor} : ''"
+              @click="_selectedIcon(item)"
+            >
+              <slot
+                name="icon"
+                :icon="item"
+              >
+                <e-icon
+                  :icon-name="item"
+                  :title="item"
+                  class="e-icon"
+                />
+              </slot>
+            </li>
+          </ul>
+          <span
+            v-else
+            class="fas-no-data"
+            v-text="emptyText"
+          />
+        </el-scrollbar>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import iconList, { eIconList, elementUI, fontAwesome } from './iconList'
+import { off, on } from './utils/index'
+import EIcon from './eIcon/e-icon'
+import ElInput from 'element-ui/lib/input'
+import ElPopover from 'element-ui/lib/popover'
+import ElScrollbar from 'element-ui/lib/scrollbar'
+import { PopupManager } from 'element-ui/lib/utils/popup'
+
+export default {
+  name: 'EIconPicker',
+  components: {
+    EIcon,
+    ElInput,
+    ElPopover,
+    ElScrollbar
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    clearable: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    styles: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    placement: {
+      type: String,
+      default() {
+        return 'bottom'
+      }
+    },
+    value: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    options: {},
+    width: {
+      type: Number,
+      default() {
+        return -1
+      }
+    },
+    size: {
+      type: String,
+      default() {
+        return 'medium'
+      }
+    },
+    placeholder: {
+      type: String,
+      default() {
+        return '请选择图标'
+      }
+    },
+    defaultIcon: {
+      type: String,
+      default() {
+        return 'eiconfont e-icon-bi'
+      }
+    },
+    emptyText: {
+      type: String,
+      default() {
+        return '暂无可选图标'
+      }
+    },
+    highLightColor: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    zIndex: {
+      type: Number,
+      default() {
+        return null
+      }
+    },
+    showPrefix: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    color: {
+      type: String,
+      default() {
+        return 'rgba(255, 0, 0, 1.0)'
+      }
+    }
+  },
+  data() {
+    return {
+      iconList: [],
+      visible: false,
+      prefixIcon: 'eiconfont e-icon-bi',
+      name: '',
+      icon: {},
+      myPlacement: 'bottom',
+      popoverWidth: 200,
+      destroy: false,
+      id: new Date().getTime(),
+      proxyValue: '',
+      curColor: '',
+      tempSelected: ''
+    }
+  },
+  computed: {
+    dataList: function() {
+      const arr1 = []
+      for (let i = 0, len = this.iconList.length; i < len; i++) {
+        if (arr1.indexOf(this.iconList[i]) === -1) {
+          arr1.push(this.iconList[i])
+        }
+      }
+      return arr1
+    },
+    dynamicPlaceholder() {
+      return this.name ? '' : this.placeholder
+    }
+
+  },
+  watch: {
+    value: function(val) {
+      setTimeout(() => {
+        this.name = val
+        this.prefixIcon = this.name ? this.name : this.defaultIcon
+      }, 50)
+    },
+    visible: function(val) {
+      if (val === false) {
+        this.$nextTick(() => {
+          off(document, 'mouseup', this._popoverHideFun)
+        })
+      } else {
+        this.$nextTick(() => {
+          this.createIconList()
+          on(document, 'mouseup', this._popoverHideFun)
+        })
+      }
+    },
+
+    options: {
+      handler(newV, oldV) {
+        const self = this
+        setTimeout(() => {
+          self._initIcon(true)
+        }, 50)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this._updateW()
+  },
+  beforeDestroy() {
+    off(document, 'mouseup', this._popoverHideFun)
+    this.destroyIconList()
+  },
+  created() {
+    this.createIconList()
+    this._initIcon(true)
+    this.curColor = this.color
+  },
+  methods: {
+    colorChange(c) {
+      this.color = c
+      this.$emit('set-color', c)
+    },
+    setTempSelected() {
+      this.tempSelected = this.name
+    },
+    sure() {
+      this.visible = false
+      this.name = this.tempSelected
+      this.prefixIcon = this.name
+      this.color = this.curColor
+      this._emitFun(this.name)
+      this.$emit('set-color', this.curColor)
+    },
+    _change(val) {
+      this.iconList = this.icon.list.filter(function(i) {
+        return i.indexOf(val) !== -1
+      })
+    },
+    _initIcon(type) {
+      this.prefixIcon = this.value && type && type === true ? this.value : this.defaultIcon
+      this.name = type === true ? this.value : ''
+      this.icon = Object.assign({}, iconList)
+      if (this.options) {
+        this.icon.list = []
+        if (this.options.addIconList !== undefined &&
+            this.options.addIconList &&
+            this.options.addIconList.length > 0) {
+          this.icon.addIcon(this.options.addIconList)
+        }
+        if (this.options.removeIconList !== undefined &&
+            this.options.removeIconList &&
+            this.options.removeIconList.length > 0) {
+          this.icon.removeIcon(this.options.removeIconList)
+        }
+        if (this.options.FontAwesome === true) {
+          this.icon.addIcon(fontAwesome)
+        }
+        if (this.options.ElementUI === true) {
+          this.icon.addIcon(elementUI)
+        }
+        if (this.options.eIcon === true) {
+          if (this.options.eIconSymbol) {
+            const list = eIconList.map((item) => {
+              return item.replace('eiconfont ', '#')
+            })
+            this.icon.addIcon(list)
+          } else {
+            this.icon.addIcon(eIconList)
+          }
+        }
+      }
+      this.iconList = this.icon.list
+
+      if (this.placement && (this.placement === 'bottom' || this.placement === 'top')) {
+        this.myPlacement = this.placement
+      }
+      if (type === false) {
+        this._emitFun('')
+      }
+    },
+
+    addIcon(item = []) {
+      if (item !== undefined && item && item.length > 0) {
+        this.icon.addIcon(item)
+        this.iconList = this.icon.list
+      }
+    },
+    removeIcon(item = []) {
+      if (item !== undefined && item && item.length > 0) {
+        this.icon.removeIcon(item)
+        this.iconList = this.icon.list
+      }
+    },
+    updatePopper(zIndex) {
+      if (zIndex) {
+        PopupManager.zIndex = zIndex
+      }
+      this._popoverShowFun(true)
+      setTimeout(() => {
+        this.$refs.popover.updatePopper()
+      }, 100)
+    },
+    _selectedIcon(item) {
+      this.tempSelected = item
+    },
+    _updateW() {
+      this.$nextTick(() => {
+        if (this.width === -1 && this.$refs.input && this.$refs.input.$el) {
+          this.popoverWidth = this.$refs.input.$el.getBoundingClientRect().width - 36
+        } else {
+          this.popoverWidth = this.width
+        }
+        if (this.$refs.eScrollbar && this.$refs.eScrollbar.wrap) {
+          this.$refs.eScrollbar.wrap.scrollTop = 0
+          this.$refs.eScrollbar.handleScroll()
+          this.$refs.eScrollbar.update()
+        }
+      })
+    },
+    _popoverShowFun(flag) {
+      const _this = this
+      if (_this.readonly !== true && _this.disabled !== true) {
+        if (!flag && _this.zIndex) {
+          PopupManager.zIndex = this.zIndex
+        }
+        _this.visible = true
+        _this._updateW()
+      }
+    },
+    _popoverHideFun(e) {
+      const path = e.path || (e.composedPath && e.composedPath())
+
+      const isInside = path.some(list => {
+        return list.className && typeof list.className === 'string' && (list.className.indexOf('ui-fas') !== -1 || list.className.indexOf('de-icon-picker-container') !== -1)
+      })
+
+      if (!isInside) {
+        this.visible = false
+      }
+
+      const isInput = path.some(list => {
+        return list.className && typeof list.className === 'string' && list.className.indexOf('de-icon-picker-input') !== -1
+      })
+
+      if (this.visible && isInput) {
+        // this.visible = false
+      }
+    },
+    _emitFun(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+
+    destroyIconList() {
+      this.destroy = true
+    },
+
+    createIconList() {
+      this.destroy = false
+    },
+    show() {
+      this._popoverShowFun(false)
+    },
+    hide() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~element-ui/lib/theme-chalk/input.css';
+@import '~element-ui/lib/theme-chalk/popover.css';
+@import '~element-ui/lib/theme-chalk/scrollbar.css';
+@import '~element-ui/lib/theme-chalk/select-dropdown.css';
+
+.fas-icon-list {
+  list-style-type: none;
+  margin: 0 0 0 -4px;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.ui-fas .el-input__inner {
+  cursor: pointer;
+}
+
+.fas-icon-list li {
+  width: 30px;
+  height: 30px;
+  margin: 5px;
+}
+
+.fas-icon-list li i, .fas-icon-list li svg {
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.el-icon-popper {
+  max-height: 400px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.el-icon-popper[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.fas-no-data {
+  display: block;
+}
+
+.e-icon {
+  font-size: 16px;
+}
+.top-divider {
+  margin: 5px 0 0 0 !important;
+}
+.top-container {
+  display: flex;
+}
+.top-sure-button-div {
+  margin: 4px 15px 0 auto;
+  ::v-deep button {
+    width: 25px;
+    height: 20px;
+    padding: 4px 5px;
+  }
+}
+.selected-icon-container {
+  position: absolute;
+  z-index: 9;
+  width: 21%;
+  text-align: center;
+  margin-top: 2px;
+  pointer-events: none;
+}
+.picker-li {
+  text-align: center;
+  line-height: 30px;
+}
+</style>
diff --git a/frontend/src/components/deIconPicker/utils/TypeUtil.js b/frontend/src/components/deIconPicker/utils/TypeUtil.js
new file mode 100644
index 0000000000..2f4dc79a1c
--- /dev/null
+++ b/frontend/src/components/deIconPicker/utils/TypeUtil.js
@@ -0,0 +1,27 @@
+
+export const TypeUtil = {
+
+  isArray: function(obj) {
+    return (typeof obj === 'object') && obj.constructor === Array
+  },
+
+  isString: function(obj) {
+    return (typeof obj === 'string') && obj.constructor === String
+  },
+
+  isNumber: function(obj) {
+    return (typeof obj === 'number') && obj.constructor === Number
+  },
+
+  isDate: function(obj) {
+    return (typeof obj === 'object') && obj.constructor === Date
+  },
+
+  isFunction: function(obj) {
+    return (typeof obj === 'function') && obj.constructor === Function
+  },
+
+  isObject: function(obj) {
+    return (typeof obj === 'object') && obj.constructor === Object
+  }
+}
diff --git a/frontend/src/components/deIconPicker/utils/dom.js b/frontend/src/components/deIconPicker/utils/dom.js
new file mode 100644
index 0000000000..08438c5716
--- /dev/null
+++ b/frontend/src/components/deIconPicker/utils/dom.js
@@ -0,0 +1,36 @@
+import { isServer } from './util'
+
+export const on = (function() {
+  if (!isServer) {
+    if (document && document.addEventListener) {
+      return function(element, event, handler) {
+        if (element && event && handler) {
+          element.addEventListener(event, handler, false)
+        }
+      }
+    } else {
+      return function(element, event, handler) {
+        if (element && event && handler) {
+          element.attachEvent('on' + event, handler)
+        }
+      }
+    }
+  }
+})()
+export const off = (function() {
+  if (!isServer) {
+    if (document && document.removeEventListener) {
+      return function(element, event, handler) {
+        if (element && event) {
+          element.removeEventListener(event, handler, false)
+        }
+      }
+    } else {
+      return function(element, event, handler) {
+        if (element && event) {
+          element.detachEvent('on' + event, handler)
+        }
+      }
+    }
+  }
+})()
diff --git a/frontend/src/components/deIconPicker/utils/getSvg.js b/frontend/src/components/deIconPicker/utils/getSvg.js
new file mode 100644
index 0000000000..e1c8afcda0
--- /dev/null
+++ b/frontend/src/components/deIconPicker/utils/getSvg.js
@@ -0,0 +1,15 @@
+const req = require.context(process.env.VUE_APP_SVG, false, /\.svg$/)
+
+const requireAllFile = requireContext => requireContext.keys().map(requireContext)
+requireAllFile(req)
+
+const re = /\.\/(.*)\.svg/
+
+const requireAll = requireContext => requireContext.keys()
+
+const svgIcons = requireAll(req).map(i => {
+  return '#' + i.match(re)[1]
+})
+
+export default svgIcons
+
diff --git a/frontend/src/components/deIconPicker/utils/index.js b/frontend/src/components/deIconPicker/utils/index.js
new file mode 100644
index 0000000000..8d188d1a8e
--- /dev/null
+++ b/frontend/src/components/deIconPicker/utils/index.js
@@ -0,0 +1,28 @@
+(function(e, d, w) {
+  if (!e.composedPath) {
+    e.composedPath = function() {
+      if (this.path) {
+        return this.path
+      }
+      let target = this.target
+
+      this.path = []
+      while (target.parentNode !== null) {
+        this.path.push(target)
+        target = target.parentNode
+      }
+      this.path.push(d, w)
+      return this.path
+    }
+  }
+  if (!String.prototype.startsWith) {
+    // eslint-disable-next-line no-extend-native
+    String.prototype.startsWith = function(search, pos) {
+      return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search
+    }
+  }
+})(Event.prototype, document, window)
+
+export * from './util'
+export * from './dom'
+export * from './TypeUtil'
diff --git a/frontend/src/components/deIconPicker/utils/util.js b/frontend/src/components/deIconPicker/utils/util.js
new file mode 100644
index 0000000000..1b9beb5f51
--- /dev/null
+++ b/frontend/src/components/deIconPicker/utils/util.js
@@ -0,0 +1,53 @@
+
+export const analyzingIconForIconfont = function(json) {
+  let font_family = ''
+  let css_prefix_text = ''
+  let list = []
+  if (json) {
+    if (json.font_family) {
+      font_family = json.font_family
+    }
+    if (json.css_prefix_text) {
+      css_prefix_text = json.css_prefix_text
+    }
+    if (json.glyphs) {
+      list = json.glyphs.map(function(value, index, array) {
+        return font_family + ' ' + css_prefix_text + value.font_class
+      })
+    }
+  }
+  return {
+    font_family,
+    css_prefix_text,
+    list
+  }
+}
+
+export const eIconSymbol = function(json) {
+  let font_family = ''
+  let css_prefix_text = ''
+  let list = []
+  if (json) {
+    if (json.font_family) {
+      font_family = json.font_family
+    }
+    if (json.css_prefix_text) {
+      css_prefix_text = json.css_prefix_text
+    }
+    if (json.glyphs) {
+      list = json.glyphs.map(function(value, index, array) {
+        return '#' + css_prefix_text + value.font_class
+      })
+    }
+  }
+  return {
+    font_family,
+    css_prefix_text,
+    list
+  }
+}
+
+export function isExternal(path) {
+  return /^(https?:|data:|\/\/?)/.test(path)
+}
+export const isServer = typeof window === 'undefined'
diff --git a/frontend/src/deicons/index.js b/frontend/src/deicons/index.js
new file mode 100644
index 0000000000..67a0f02c2a
--- /dev/null
+++ b/frontend/src/deicons/index.js
@@ -0,0 +1,15 @@
+const req = require.context('./svg', false, /\.svg$/)
+
+const requireAllFile = requireContext => requireContext.keys().map(requireContext)
+requireAllFile(req)
+
+const re = /\.\/(.*)\.svg/
+
+const requireAll = requireContext => requireContext.keys()
+
+const deSvgIcons = requireAll(req).map(i => {
+  return '#' + i.match(re)[1]
+})
+
+export default deSvgIcons
+
diff --git a/frontend/src/deicons/svg/ai37.svg b/frontend/src/deicons/svg/ai37.svg
new file mode 100644
index 0000000000..48eff1273f
--- /dev/null
+++ b/frontend/src/deicons/svg/ai37.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M423.731142 161.571862 423.731142 249.306043 713.416847 249.306043 160.428318 802.295596 221.877855 863.682711 774.803963 310.790372 774.803963 600.443331 862.637404 600.443331 862.637404 161.571862Z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/ai65.svg b/frontend/src/deicons/svg/ai65.svg
new file mode 100644
index 0000000000..c5154d2dcc
--- /dev/null
+++ b/frontend/src/deicons/svg/ai65.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M883.075899 428.228061l-267.119757-22.906709-104.369046-246.226914-104.363929 246.226914-267.122827 22.906709 202.63714 175.596274-60.72606 261.081227 229.575676-138.430816 229.577722 138.374534-60.780295-261.134439L883.075899 428.228061zM511.587096 656.715963 511.587096 311.183322l63.559595 149.966547 162.695452 14.038738-123.465986 106.871029 37.002752 158.998247L511.587096 656.715963z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/bumanyi.svg b/frontend/src/deicons/svg/bumanyi.svg
new file mode 100644
index 0000000000..6d72da5cb8
--- /dev/null
+++ b/frontend/src/deicons/svg/bumanyi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c52 0 102.4 10.4 149.6 30.4 45.6 19.2 86.4 47.2 122.4 82.4s63.2 76 82.4 122.4c20 47.2 30.4 97.6 30.4 149.6s-10.4 102.4-30.4 149.6c-19.2 45.6-47.2 86.4-82.4 122.4s-76.8 63.2-122.4 82.4c-47.2 20-97.6 30.4-149.6 30.4s-102.4-10.4-149.6-30.4c-45.6-19.2-86.4-47.2-122.4-82.4s-63.2-76.8-82.4-122.4C138.4 614.4 128 564 128 512s10.4-102.4 30.4-149.6C177.6 316.8 204.8 276 240 240s76-63.2 122.4-82.4C409.6 138.4 460 128 512 128m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z"  /><path d="M288 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64zM608 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64zM513.6 512.8c-46.4 0-92 15.2-132 44.8C344 585.6 312 624.8 289.6 672c-8 16-0.8 35.2 15.2 42.4 16 7.2 35.2 0.8 42.4-15.2 17.6-37.6 42.4-68.8 72-90.4C448 587.2 480 576 512.8 576s64.8 11.2 93.6 32.8c28.8 21.6 53.6 52.8 72 90.4 7.2 16 26.4 22.4 42.4 15.2 16-7.2 22.4-26.4 15.2-42.4-22.4-47.2-54.4-86.4-91.2-114.4-39.2-29.6-84.8-44.8-131.2-44.8z"  /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/chaping-yuankuang.svg b/frontend/src/deicons/svg/chaping-yuankuang.svg
new file mode 100644
index 0000000000..78435c9b6e
--- /dev/null
+++ b/frontend/src/deicons/svg/chaping-yuankuang.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM340.8 525.6c0 4.8-4 9.6-8.8 10.4l-64 2.4c-5.6 0.8-12-4-12-10.4V288c0-6.4 5.6-11.2 12.8-10.4l64 2.4c4.8 0.8 8.8 5.6 8.8 10.4v235.2z m424-2.4c0 35.2-31.2 32.8-31.2 32.8H596C644.8 749.6 566.4 768 566.4 768c-30.4 0-27.2-40.8-27.2-44C539.2 656 446.4 576 393.6 544c-5.6-3.2-9.6-9.6-9.6-16.8V299.2c0-10.4 8.8-19.2 19.2-19.2 60 0 284-21.6 284-21.6 17.6 0 32 49.6 32 49.6 47.2 171.2 45.6 215.2 45.6 215.2z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/chaping.svg b/frontend/src/deicons/svg/chaping.svg
new file mode 100644
index 0000000000..db73c2e151
--- /dev/null
+++ b/frontend/src/deicons/svg/chaping.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M320 189.6v343.2c0 10.4 5.6 20 14.4 25.6 80 48 220.8 168.8 220.8 271.2 0 4.8-5.6 66.4 40.8 66.4 0 0 118.4-28 44.8-320h208s48 4 48-48.8c0 0 2.4-66.4-68-324.8 0 0-21.6-74.4-48.8-74.4 0 0-340 32-430.4 32-16.8 0-29.6 12.8-29.6 29.6zM146.4 155.2l96 4c8 1.6 13.6 8 13.6 16v355.2c0 8-5.6 14.4-13.6 16l-96 3.2c-9.6 1.6-18.4-5.6-18.4-16V171.2c0-10.4 8.8-17.6 18.4-16z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/circle.svg b/frontend/src/deicons/svg/circle.svg
new file mode 100644
index 0000000000..5f182a5354
--- /dev/null
+++ b/frontend/src/deicons/svg/circle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M62 512c0 248.528 201.472 450 450 450s450-201.472 450-450c0-248.528-201.472-450-450-450-248.528 0-450 201.472-450 450z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg b/frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg
new file mode 100644
index 0000000000..1e2492895b
--- /dev/null
+++ b/frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m238.4 641.6l-45.6 45.6L512 557.6 318.4 750.4l-45.6-45.6L467.2 512 273.6 318.4l45.6-45.6L512 467.2l193.6-193.6 45.6 45.6L557.6 512l192.8 193.6z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/five-star.svg b/frontend/src/deicons/svg/five-star.svg
new file mode 100644
index 0000000000..c996d5b85d
--- /dev/null
+++ b/frontend/src/deicons/svg/five-star.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 63.34l141.072 285.815 315.433 45.84-228.24 222.503 53.879 314.185-282.144-148.368-282.144 148.368 53.879-314.185-228.24-222.503 315.433-45.84z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/gantanhao-yuankuang.svg b/frontend/src/deicons/svg/gantanhao-yuankuang.svg
new file mode 100644
index 0000000000..0a40a39a80
--- /dev/null
+++ b/frontend/src/deicons/svg/gantanhao-yuankuang.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m-64-128V256h64v384h-64z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/haoping-yuankuang.svg b/frontend/src/deicons/svg/haoping-yuankuang.svg
new file mode 100644
index 0000000000..31c5a0265e
--- /dev/null
+++ b/frontend/src/deicons/svg/haoping-yuankuang.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM340.8 695.2c0 4.8-4 9.6-8.8 10.4l-64 2.4c-6.4 0.8-12.8-4-12.8-10.4v-240c0-6.4 5.6-11.2 12-10.4l64 2.4c4.8 0.8 8.8 5.6 8.8 10.4v235.2zM720 677.6s-14.4 49.6-32 49.6c0 0-224-21.6-284-21.6-10.4 0-19.2-8.8-19.2-19.2V458.4c0-7.2 3.2-13.6 9.6-16.8 52.8-32 145.6-112 145.6-180 0-3.2-4-44 27.2-44 0 0 78.4 18.4 29.6 212h136.8s31.2-3.2 31.2 32.8c0 0 1.6 44-44.8 215.2z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/haoping.svg b/frontend/src/deicons/svg/haoping.svg
new file mode 100644
index 0000000000..d484e7a397
--- /dev/null
+++ b/frontend/src/deicons/svg/haoping.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M320 834.4V491.2c0-10.4 5.6-20 14.4-25.6 79.2-48 220-168.8 220-271.2 0-4.8-5.6-66.4 40.8-66.4 0 0 118.4 28 44.8 320h208s47.2-4 47.2 48.8c0 0 2.4 66.4-67.2 324.8 0 0-21.6 74.4-48.8 74.4 0 0-340-32-431.2-32-15.2 0-28-13.6-28-29.6z m-173.6 34.4l96-4c8-1.6 13.6-8 13.6-16V494.4c0-8-5.6-14.4-13.6-16l-96-3.2c-9.6-1.6-18.4 5.6-18.4 16v361.6c-0.8 10.4 8 17.6 18.4 16z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/jiantou-copy-copy-2.svg b/frontend/src/deicons/svg/jiantou-copy-copy-2.svg
new file mode 100644
index 0000000000..ade81018fb
--- /dev/null
+++ b/frontend/src/deicons/svg/jiantou-copy-copy-2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M362.57 764.226h364.149c28.44 0 51.491-23.051 51.491-51.491v-364.149c0-28.44-23.051-51.491-51.491-51.491s-51.491 23.051-51.491 51.491v239.829l-349.073-349.073c-20.119-20.119-52.711-20.119-72.831 0s-20.119 52.711 0 72.831l349.073 349.073h-239.829c-14.202-0.001-27.093 5.754-36.415 15.076s-15.094 22.195-15.076 36.415c0 28.44 23.051 51.491 51.491 51.491z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/jiantou-copy-copy-copy.svg b/frontend/src/deicons/svg/jiantou-copy-copy-copy.svg
new file mode 100644
index 0000000000..820539d967
--- /dev/null
+++ b/frontend/src/deicons/svg/jiantou-copy-copy-copy.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M661.43 259.774h-364.149c-28.44 0-51.491 23.051-51.491 51.491v364.149c0 28.44 23.051 51.491 51.491 51.491s51.491-23.051 51.491-51.491v-239.829l349.073 349.073c20.119 20.119 52.711 20.119 72.831 0s20.119-52.711 0-72.831l-349.073-349.073h239.829c14.202 0.001 27.093-5.754 36.415-15.076s15.094-22.195 15.076-36.415c0-28.44-23.051-51.491-51.491-51.491z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/jiantou-copy-copy.svg b/frontend/src/deicons/svg/jiantou-copy-copy.svg
new file mode 100644
index 0000000000..9632db94ce
--- /dev/null
+++ b/frontend/src/deicons/svg/jiantou-copy-copy.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M259.774 362.57v364.149c0 28.44 23.051 51.491 51.491 51.491h364.149c28.44 0 51.491-23.051 51.491-51.491s-23.051-51.491-51.491-51.491h-239.829l349.073-349.073c20.119-20.119 20.119-52.711 0-72.831s-52.711-20.119-72.831 0l-349.073 349.073v-239.829c0.001-14.202-5.754-27.093-15.076-36.415s-22.195-15.094-36.415-15.076c-28.44 0-51.491 23.051-51.491 51.491z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/lingxing.svg b/frontend/src/deicons/svg/lingxing.svg
new file mode 100644
index 0000000000..23044b85ae
--- /dev/null
+++ b/frontend/src/deicons/svg/lingxing.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 69.479l442.498 442.498-442.498 442.498-442.498-442.498 442.498-442.498z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/manyi.svg b/frontend/src/deicons/svg/manyi.svg
new file mode 100644
index 0000000000..1823ee3eb0
--- /dev/null
+++ b/frontend/src/deicons/svg/manyi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c52 0 102.4 10.4 149.6 30.4 45.6 19.2 86.4 47.2 122.4 82.4s63.2 76 82.4 122.4c20 47.2 30.4 97.6 30.4 149.6s-10.4 102.4-30.4 149.6c-19.2 45.6-47.2 86.4-82.4 122.4s-76.8 63.2-122.4 82.4c-47.2 20-97.6 30.4-149.6 30.4s-102.4-10.4-149.6-30.4c-45.6-19.2-86.4-47.2-122.4-82.4s-63.2-76.8-82.4-122.4C138.4 614.4 128 564 128 512s10.4-102.4 30.4-149.6C177.6 316.8 204.8 276 240 240s76-63.2 122.4-82.4C409.6 138.4 460 128 512 128m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM288 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m320 0.8c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28-64 64zM512 768c46.4 0 92-15.2 132-44.8 37.6-28 68.8-67.2 91.2-114.4 8-16 0.8-35.2-15.2-42.4-16-8-35.2-0.8-42.4 15.2-17.6 37.6-43.2 68.8-72 90.4-28 20.8-60.8 32-93.6 32s-64.8-11.2-93.6-32.8c-28.8-21.6-53.6-52.8-72-90.4-8-16-27.2-22.4-42.4-15.2-16 8-22.4 26.4-15.2 42.4 22.4 47.2 54.4 86.4 91.2 114.4 40 30.4 85.6 45.6 132 45.6z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/paixu.svg b/frontend/src/deicons/svg/paixu.svg
new file mode 100644
index 0000000000..03eb83ffa4
--- /dev/null
+++ b/frontend/src/deicons/svg/paixu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/qizi.svg b/frontend/src/deicons/svg/qizi.svg
new file mode 100644
index 0000000000..d5e9cbd575
--- /dev/null
+++ b/frontend/src/deicons/svg/qizi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M152.474 62.225c-26.856 0-56.286 21.748-56.286 48.663v802.451c0 26.798 28.773 48.653 55.579 48.653 26.789 0 56.286-21.857 56.286-48.663v-802.434c0-26.914-28.78-48.663-55.579-48.663zM730.146 129.011c-157.836 0-157.836-64.694-315.663-64.694-91.108 0-161.46 42.504-161.46 42.504l-0.658 484.313s71.010-42.446 162.119-42.446c157.827 0 157.827 64.694 315.663 64.694 98.74 0 197.923-51.845 197.923-51.845v-484.264s-99.183 51.737-197.923 51.737z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/rect.svg b/frontend/src/deicons/svg/rect.svg
new file mode 100644
index 0000000000..4abcdc2ba7
--- /dev/null
+++ b/frontend/src/deicons/svg/rect.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M62 62h900v900h-900v-900z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/shangjiantou.svg b/frontend/src/deicons/svg/shangjiantou.svg
new file mode 100644
index 0000000000..c6c8bd91ac
--- /dev/null
+++ b/frontend/src/deicons/svg/shangjiantou.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/weizhi.svg b/frontend/src/deicons/svg/weizhi.svg
new file mode 100644
index 0000000000..8334aae50e
--- /dev/null
+++ b/frontend/src/deicons/svg/weizhi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/wenhao-yuankuang.svg b/frontend/src/deicons/svg/wenhao-yuankuang.svg
new file mode 100644
index 0000000000..7e5d3f190f
--- /dev/null
+++ b/frontend/src/deicons/svg/wenhao-yuankuang.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/wujiaoxing.svg b/frontend/src/deicons/svg/wujiaoxing.svg
new file mode 100644
index 0000000000..ad9ddfa54b
--- /dev/null
+++ b/frontend/src/deicons/svg/wujiaoxing.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M509.867 189.867L608 411.733l243.2 25.6-181.333 162.134 51.2 238.933-211.2-121.6-211.2 121.6 51.2-238.933L168.533 435.2l243.2-25.6 98.134-219.733z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/xiajiantou.svg b/frontend/src/deicons/svg/xiajiantou.svg
new file mode 100644
index 0000000000..d3331d189b
--- /dev/null
+++ b/frontend/src/deicons/svg/xiajiantou.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/xiangshang.svg b/frontend/src/deicons/svg/xiangshang.svg
new file mode 100644
index 0000000000..64dad63c94
--- /dev/null
+++ b/frontend/src/deicons/svg/xiangshang.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/xiangyou.svg b/frontend/src/deicons/svg/xiangyou.svg
new file mode 100644
index 0000000000..21e90511c1
--- /dev/null
+++ b/frontend/src/deicons/svg/xiangyou.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M47.104 453.632q0-43.008 20.992-57.856t66.048-14.848q20.48 0 64.512 0.512t93.696 0.512 96.768 0.512 74.752 0.512q38.912 1.024 61.44-6.656t22.528-35.328q0-20.48 1.536-48.64t1.536-48.64q1.024-35.84 20.48-45.568t49.152 14.848q30.72 24.576 71.68 58.368t84.992 69.12 86.016 69.632 74.752 59.904q29.696 24.576 30.208 46.592t-28.16 45.568q-29.696 24.576-70.144 56.32t-83.968 65.536-85.504 67.072-74.752 58.88q-35.84 28.672-58.88 21.504t-22.016-44.032l0-24.576 0-29.696q0-15.36-0.512-30.208t-0.512-27.136q0-25.6-15.36-32.256t-41.984-6.656q-29.696 0-77.824-0.512t-100.352-0.512-101.376-0.512-79.872-0.512q-13.312 0-27.648-2.56t-26.112-9.728-18.944-20.992-7.168-37.376q0-27.648-0.512-53.248t0.512-57.344z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/xiangzuo.svg b/frontend/src/deicons/svg/xiangzuo.svg
new file mode 100644
index 0000000000..14fd56a839
--- /dev/null
+++ b/frontend/src/deicons/svg/xiangzuo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M966.656 567.296q0 43.008-20.48 58.368t-65.536 15.36l-64.512 0q-44.032 0-93.696 0.512t-96.768 0.512l-74.752 0q-38.912 0-61.952 7.68t-22.016 35.328q0 20.48-1.024 48.64t-1.024 49.664q0 35.84-19.456 45.568t-50.176-13.824q-30.72-24.576-72.704-57.856t-85.504-68.096-86.016-68.608-75.264-59.392q-30.72-24.576-31.232-46.592t28.16-45.568q28.672-24.576 68.608-56.832t82.944-66.56 84.48-68.096 74.24-60.416q35.84-28.672 58.88-22.016t23.04 43.52l0 25.6q0 14.336 0.512 29.696t1.024 30.208 0.512 26.112q1.024 25.6 16.384 32.256t41.984 6.656q29.696 0 77.824-0.512t100.352-0.512 101.376-0.512 79.872-0.512q13.312 0 27.648 2.048t26.112 9.728 19.456 21.504 7.68 36.352q0 27.648 0.512 53.248t0.512 57.344z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/yiban.svg b/frontend/src/deicons/svg/yiban.svg
new file mode 100644
index 0000000000..24e624762e
--- /dev/null
+++ b/frontend/src/deicons/svg/yiban.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c52 0 102.4 10.4 149.6 30.4 45.6 19.2 86.4 47.2 122.4 82.4s63.2 76 82.4 122.4c20 47.2 30.4 97.6 30.4 149.6s-10.4 102.4-30.4 149.6c-19.2 45.6-47.2 86.4-82.4 122.4s-76.8 63.2-122.4 82.4c-47.2 20-97.6 30.4-149.6 30.4s-102.4-10.4-149.6-30.4c-45.6-19.2-86.4-47.2-122.4-82.4s-63.2-76.8-82.4-122.4C138.4 614.4 128 564 128 512s10.4-102.4 30.4-149.6C177.6 316.8 204.8 276 240 240s76-63.2 122.4-82.4C409.6 138.4 460 128 512 128m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM288 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28-64 64z m320 0c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m96 288c0-17.6-14.4-32-32-32H352c-17.6 0-32 14.4-32 32s14.4 32 32 32h320c17.6 0 32-14.4 32-32z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/youjiantou.svg b/frontend/src/deicons/svg/youjiantou.svg
new file mode 100644
index 0000000000..9b4650a3e3
--- /dev/null
+++ b/frontend/src/deicons/svg/youjiantou.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/zheng-triangle.svg b/frontend/src/deicons/svg/zheng-triangle.svg
new file mode 100644
index 0000000000..347d2c8da5
--- /dev/null
+++ b/frontend/src/deicons/svg/zheng-triangle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M71.675 893.33l440.325-762.683 440.325 762.683z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg b/frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg
new file mode 100644
index 0000000000..8eec7dd2d3
--- /dev/null
+++ b/frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM428 718.4l-45.6 45.6-45.6-45.6-116-117.6 45.6-45.6L383.2 672l367.2-367.2 45.6 45.6-368 368z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/zuojiantou.svg b/frontend/src/deicons/svg/zuojiantou.svg
new file mode 100644
index 0000000000..57beea3da4
--- /dev/null
+++ b/frontend/src/deicons/svg/zuojiantou.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svgo.yml b/frontend/src/deicons/svgo.yml
new file mode 100644
index 0000000000..d11906aec2
--- /dev/null
+++ b/frontend/src/deicons/svgo.yml
@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 62968c5caf..e09d2322f0 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -931,6 +931,12 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    mark_field: 'Field',
+    mark_value: 'Value',
+    function_style: 'Function style',
+    condition_style: 'Mark style',
+    longitude: 'Longitude',
+    latitude: 'Latitude',
     gradient: 'Gradient',
     layer_controller: 'Quota switch',
     suspension: 'Suspension',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 69a3d2c1f9..397b2136d3 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -930,6 +930,12 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    mark_field: '字段',
+    mark_value: '值',
+    function_style: '功能型樣式',
+    condition_style: '標記樣式',
+    longitude: '經度',
+    latitude: '緯度',
     gradient: '漸變',
     layer_controller: '指標切換',
     suspension: '懸浮',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index f0971cd637..ab0dc77529 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -929,6 +929,12 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    mark_field: '字段',
+    mark_value: '值',
+    function_style: '功能型样式',
+    condition_style: '标记样式',
+    longitude: '经度',
+    latitude: '纬度',
     gradient: '渐变',
     layer_controller: '指标切换',
     suspension: '悬浮',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 98cf7ed868..19dc72e6dc 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -132,6 +132,11 @@ export const DEFAULT_SIZE = {
 export const DEFAULT_SUSPENSION = {
   show: true
 }
+
+export const DEFAULT_MARK = {
+  fieldId: '',
+  conditions: []
+}
 export const DEFAULT_LABEL = {
   show: false,
   position: 'top',
@@ -892,14 +897,25 @@ export const BASE_MAP = {
     inRange: {
       color: ['lightskyblue', 'yellow', 'orangered']
     },
+    seriesIndex: 0,
     textStyle: {},
     right: 0
   },
+  geo: {
+    map: 'MAP',
+    roam: true,
+    nameMap: {
+
+    },
+    itemStyle: {
+
+    }
+  },
   series: [
     {
       name: '',
       type: 'map',
-      map: 'MAP',
+      geoIndex: 0,
       roam: true,
       data: [],
       itemStyle: {
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index fbc331b0cb..0068d79fef 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -159,7 +159,80 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seri
       if (chart.senior) {
         const senior = JSON.parse(chart.senior)
 
-        senior && senior.mapMapping && senior.mapMapping[curAreaCode] && (chart_option.series[0].nameMap = senior.mapMapping[curAreaCode])
+        senior && senior.mapMapping && senior.mapMapping[curAreaCode] && (chart_option.geo.nameMap = senior.mapMapping[curAreaCode])
+      }
+
+      if (chart.data?.detailFields?.length > 1) {
+        const deNameArray = ['x', 'y']
+        chart.data.detailFields.forEach(item => {
+          if (item?.busiType === 'locationXaxis') {
+            deNameArray[0] = item
+          } else if (item?.busiType === 'locationYaxis') {
+            deNameArray[1] = item
+          } else {
+            deNameArray.push(item)
+          }
+        })
+        let markData = []
+        chart.data.tableRow.forEach(row => {
+          if (row?.details) {
+            markData = markData.concat(row.details.map(detail => {
+              const temp = deNameArray.map(key => detail[key.dataeaseName])
+              temp.push(1)
+              return temp
+            }))
+          }
+        })
+
+        if (markData.length) {
+          let valueIndex = -1
+          const markCondition = customAttr.mark
+          if (markCondition?.fieldId && markCondition.conditions?.length) {
+            for (let i = 0; i < deNameArray.length; i++) {
+              if (deNameArray[i].id === markCondition.fieldId) {
+                valueIndex = i
+                break
+              }
+            }
+          }
+          const markSeries = {
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            geoIndex: 0,
+            symbolSize: function(params) {
+              return 20
+            },
+            symbol: (values, param) => {
+              if (valueIndex < 0) {
+                return svgPathData()
+              }
+              const val = values[valueIndex]
+              const field = deNameArray[valueIndex]
+              const con = getSvgCondition(val, field, markCondition.conditions)
+              let svgName = null
+              if (con) {
+                svgName = con.icon
+                if (svgName && svgName.startsWith('#')) {
+                  svgName = svgName.substr(1)
+                }
+              }
+              return svgPathData(svgName)
+            },
+            itemStyle: {
+              color: params => {
+                const { value } = params
+                const val = value[valueIndex]
+                const con = getSvgCondition(val, null, markCondition.conditions)
+                return con?.color || '#b02a02'
+              }
+            },
+            encode: {
+              tooltip: 2
+            },
+            data: markData
+          }
+          chart_option.series.push(markSeries)
+        }
       }
     }
   }
@@ -167,3 +240,100 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seri
   return chart_option
 }
 
+const getSvgCondition = (val, field, conditions) => {
+  for (let i = 0; i < conditions.length; i++) {
+    const condition = conditions[i]
+    if (conditionMatch(condition, val)) {
+      return condition
+    }
+  }
+  return null
+}
+const conditionMatch = (condition, curVal) => {
+  let matchResult = false
+  const { calc, value, startv, endv } = condition
+  if (!curVal || (!value && !startv && !endv)) {
+    return matchResult
+  }
+  switch (calc) {
+    case 'eq':
+      matchResult = curVal === value
+      break
+    case 'ne':
+      matchResult = curVal !== value
+      break
+    case 'contain':
+      matchResult = curVal.includes(value)
+      break
+    case 'uncontain':
+      matchResult = !curVal.includes(value)
+      break
+    case 'start':
+      matchResult = curVal.startsWith(value)
+      break
+    case 'end':
+      matchResult = curVal.endsWith(value)
+      break
+
+    case 'gt':
+      matchResult = parseFloat(curVal) > parseFloat(value)
+      break
+    case 'ge':
+      matchResult = parseFloat(curVal) >= parseFloat(value)
+      break
+    case 'lt':
+      matchResult = parseFloat(curVal) < parseFloat(value)
+      break
+    case 'le':
+      matchResult = parseFloat(curVal) <= parseFloat(value)
+      break
+    case 'between':
+      if (startv) {
+        matchResult = parseFloat(curVal) >= parseFloat(startv)
+      }
+      if (endv) {
+        matchResult = parseFloat(curVal) <= parseFloat(endv)
+      }
+      break
+
+    default:
+      matchResult = false
+      break
+  }
+  return matchResult
+}
+const loadXML = xmlString => {
+  const domParser = new DOMParser()
+  const xmlDoc = domParser.parseFromString(xmlString, 'text/xml')
+  return xmlDoc
+}
+
+const svgPathData = iconName => {
+  iconName = iconName || 'weizhi'
+  const defaultNode = require(`@/deicons/svg/${iconName}.svg`).default
+  if (!defaultNode?.content) return null
+  const content = defaultNode.content
+  const xmlRoot = loadXML(content)
+  const pathDataList = []
+  const stack = []
+  stack.push(xmlRoot)
+
+  let curNode
+  while (stack.length) {
+    curNode = stack.pop()
+    if (curNode?.tagName === 'path') {
+      pathDataList.push(curNode.getAttribute('d'))
+    }
+    if (curNode.childNodes?.length) {
+      let childLen = curNode.childNodes.length
+      while (childLen--) {
+        stack.push(curNode.childNodes[childLen])
+      }
+    }
+  }
+  if (pathDataList.length) {
+    return pathDataList.map(item => 'path://' + item).join('')
+  }
+  return null
+}
+
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 604118ac6c..5808b3f900 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -3170,7 +3170,8 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector',
-      'suspension-selector'
+      'suspension-selector',
+      'condition-style-selector'
     ],
     propertyInner: {
 
@@ -3207,6 +3208,9 @@ export const TYPE_CONFIGS = [
       ],
       'suspension-selector': [
         'show'
+      ],
+      'condition-style-selector': [
+        'show'
       ]
     }
   }
diff --git a/frontend/src/views/chart/components/dragItem/DetailItem.vue b/frontend/src/views/chart/components/dragItem/DetailItem.vue
new file mode 100644
index 0000000000..879da8c748
--- /dev/null
+++ b/frontend/src/views/chart/components/dragItem/DetailItem.vue
@@ -0,0 +1,154 @@
+<template>
+  <span style="position: relative;display: inline-block;">
+    <i
+      class="el-icon-arrow-down el-icon-delete"
+      style="position: absolute;top: 6px;right: 4px;color: #878d9f;cursor: pointer;z-index: 1;"
+      @click="removeItem"
+    />
+    <span class="el-dropdown-link">
+      <el-tag
+        size="small"
+        class="item-axis"
+        :type="tagType"
+      >
+        <span style="float: left">
+          <svg-icon
+            v-if="item.deType === 0"
+            icon-class="field_text"
+            class="field-icon-text"
+          />
+          <svg-icon
+            v-if="item.deType === 1"
+            icon-class="field_time"
+            class="field-icon-time"
+          />
+          <svg-icon
+            v-if="item.deType === 2 || item.deType === 3"
+            icon-class="field_value"
+            class="field-icon-value"
+          />
+          <svg-icon
+            v-if="item.deType === 5"
+            icon-class="field_location"
+            class="field-icon-location"
+          />
+        </span>
+        <span
+          class="item-span-style"
+          :title="item.name"
+        >{{ item.name }}</span>
+        <field-error-tips v-if="tagType === 'danger'" />
+
+      </el-tag>
+    </span>
+  </span>
+</template>
+
+<script>
+import { getItemType } from '@/views/chart/components/dragItem/utils'
+import FieldErrorTips from '@/views/chart/components/dragItem/components/FieldErrorTips'
+import bus from '@/utils/bus'
+
+export default {
+  name: 'LocationEditor',
+  components: { FieldErrorTips },
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tagType: 'success'
+    }
+  },
+  watch: {
+    dimensionData: function() {
+      this.getItemTagType()
+    },
+    quotaData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
+    }
+  },
+  mounted() {
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
+  },
+  methods: {
+
+    removeItem() {
+      this.item.index = this.index
+      this.$emit('onDetailItemRemove', this.item)
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: flex;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    width: 159px;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;;
+  }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
+
+  .item-span-style{
+    display: inline-block;
+    width: 115px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue b/frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue
new file mode 100644
index 0000000000..d3a885b885
--- /dev/null
+++ b/frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue
@@ -0,0 +1,403 @@
+<template>
+  <div style="width: 100%;">
+    <el-col>
+      <el-form
+        ref="markForm"
+        :model="markForm"
+        label-width="40px"
+        size="mini"
+      >
+
+        <el-form-item
+          class="form-item"
+          :label="$t('chart.mark_field')"
+        >
+          <el-select
+            v-model="markForm.fieldId"
+            style="width: 100%;"
+            clearable
+            :placeholder="($t('commons.please_select') + $t('chart.mark_field'))"
+            @change="changeFields"
+          >
+
+            <el-option-group
+              v-for="group in fieldOptions"
+              :key="group.label"
+              :label="group.label"
+            >
+              <el-option
+                v-for="item in group.options"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                :disabled="item.disabled"
+              />
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-for="(condition, index) in markForm.conditions"
+          :key="index"
+          :label="$t('chart.mark_value')"
+          class="form-item"
+        >
+          <el-col
+            class="col-start"
+            :span="6"
+          >
+            <el-select
+              v-model="condition.calc"
+              placeholder="请选择"
+              @change="changeMarkAttr('conditions')"
+            >
+              <el-option
+                v-for="item in currentCalcOption"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+          <el-col
+            v-if="condition.calc === 'between'"
+            class="col-center"
+            :span="10"
+          >
+            <el-input
+              v-model="condition.startv"
+              class="number-range-input"
+              placeholder=""
+              @input="changeMarkAttr('conditions')"
+            />
+            <span
+              class="number-range-span"
+              style="padding: 0 2px;"
+            >-</span>
+            <el-input
+              v-model="condition.endv"
+              class="number-range-input"
+              placeholder=""
+              @input="changeMarkAttr('conditions')"
+            />
+          </el-col>
+          <el-col
+            v-else
+            class="col-center"
+            :span="10"
+          >
+            <el-input
+              v-model="condition.value"
+              placeholder=""
+              @input="changeMarkAttr('conditions')"
+            />
+          </el-col>
+          <el-col
+            class="col-center"
+            :span="6"
+          >
+            <de-icon-picker
+              v-model="condition.icon"
+              :options="iconOptions"
+              :color="condition.color"
+              size="mini"
+              @change="changeMarkAttr('conditions')"
+              @set-color="c => {setConditionColor(index, c)}"
+            />
+          </el-col>
+          <el-col
+            class="col-end"
+            :span="2"
+          >
+            <div>
+              <div
+                v-if="markForm.conditions.length > 1"
+                class="i-row-container"
+                :class="index === (markForm.conditions.length - 1) ? 'flex-column': ''"
+              >
+                <i
+                  class="ope-item el-icon-minus"
+                  @click.stop="del(index)"
+                />
+              </div>
+              <div
+                v-if="index === (markForm.conditions.length - 1)"
+                class="i-row-container"
+                :class="markForm.conditions.length > 1 ? 'flex-column': ''"
+              >
+                <i
+                  class="ope-item el-icon-plus"
+                  @click.stop="add"
+                />
+              </div>
+            </div>
+          </el-col>
+        </el-form-item>
+      </el-form>
+
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_MARK } from '../../chart/chart'
+import DeIconPicker from '@/components/deIconPicker'
+import deSvgIcons from '@/deicons'
+export default {
+  name: 'MapMarkSelector',
+  components: { DeIconPicker },
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
+    },
+    view: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      markForm: JSON.parse(JSON.stringify(DEFAULT_MARK)),
+      values: null,
+
+      calcOptions: [{
+        value: 'eq',
+        label: '等于',
+        type: 'String'
+      }, {
+        value: 'contain',
+        label: '包含',
+        type: 'String'
+      }, {
+        value: 'uncontain',
+        label: '不包含',
+        type: 'String'
+      }, {
+        value: 'start',
+        label: '开头是',
+        type: 'String'
+      }, {
+        value: 'end',
+        label: '结尾是',
+        type: 'String'
+      }, {
+        value: 'eq',
+        label: '=',
+        type: 'Number'
+      }, {
+        value: 'ne',
+        label: '!=',
+        type: 'Number'
+      }, {
+        value: 'gt',
+        label: '>',
+        type: 'Number'
+      }, {
+        value: 'ge',
+        label: '>=',
+        type: 'Number'
+      }, {
+        value: 'lt',
+        label: '<',
+        type: 'Number'
+      }, {
+        value: 'le',
+        label: '<=',
+        type: 'Number'
+      }, {
+        value: 'between',
+        label: 'between',
+        type: 'Number'
+      }
+      ],
+      iconOptions: {
+        FontAwesome: false,
+        ElementUI: false,
+        addIconList: [],
+        removeIconList: []
+      }
+    }
+  },
+  computed: {
+    fieldOptions() {
+      const xaxis = this.view.xaxis
+      const yaxis = this.view.yaxis
+      const locationIds = this.view.viewFields.filter(item => item.busiType === 'locationXaxis' || item.busiType === 'locationYaxis').map(item => item.id)
+      const xIds = xaxis ? xaxis.map(item => item.id) : []
+      const yIds = yaxis ? yaxis.map(item => item.id) : []
+      const disableIds = [...xIds, ...yIds, ...locationIds]
+
+      return [
+        {
+          label: this.$t('chart.dimension'),
+          options: this.dimensionData && this.dimensionData.map(item => {
+            item.disabled = disableIds.includes(item.id)
+            return item
+          })
+        },
+        {
+          label: this.$t('chart.quota'),
+          options: this.quotaData && this.quotaData.map(item => {
+            item.disabled = disableIds.includes(item.id)
+            return item
+          })
+        }
+      ]
+    },
+    currentCalcOption() {
+      const field = this.getField(this.markForm.fieldId)
+      if (!field) {
+        return []
+      }
+      const numberType = [2, 3]
+      const excludeCalcType = numberType.includes(field.deType) ? 'String' : 'Number'
+      return this.calcOptions.filter(option => option.type !== excludeCalcType)
+    }
+
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    this.loadSvg()
+  },
+  methods: {
+    setConditionColor(index, color) {
+      this.markForm.conditions[index].color = color
+      this.changeMarkAttr('conditions')
+    },
+    loadSvg() {
+      this.iconOptions.addIconList = [...this.iconOptions.addIconList, ...deSvgIcons]
+    },
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.mark) {
+          this.markForm = customAttr.mark
+        }
+      }
+    },
+
+    add() {
+      const newRow = {
+        fieldId: this.markForm.fieldId,
+        calc: 'eq',
+        value: '',
+        icon: '',
+        color: 'rgba(255, 0, 0, 1)'
+      }
+      this.markForm.conditions.push(newRow)
+    },
+    del(index) {
+      this.markForm.conditions.splice(index, 1)
+      this.changeMarkAttr('modifyName')
+    },
+
+    changeMarkAttr(modifyName) {
+      this.markForm['modifyName'] = modifyName
+      this.$emit('onMarkChange', this.markForm)
+    },
+    getField(fieldId) {
+      const fields = [...JSON.parse(JSON.stringify(this.dimensionData)), ...JSON.parse(JSON.stringify(this.quotaData))]
+      return fields.find(item => item.id === fieldId)
+    },
+    changeFields(fieldId) {
+      const baseConditions = [
+        {
+          fieldId: fieldId,
+          calc: 'eq',
+          value: '',
+          icon: '',
+          color: 'rgba(255, 0, 0, 1.0)'
+        }
+      ]
+      this.view.viewFields = this.view.viewFields.filter(item => item.busiType !== 'daxis')
+      if (fieldId) {
+        this.markForm.conditions = JSON.parse(JSON.stringify(baseConditions))
+
+        const field = this.getField(fieldId)
+        if (field) {
+          field.busiType = 'daxis'
+          this.view.viewFields.push(field)
+        }
+      } else {
+        this.markForm.conditions = []
+      }
+
+      this.changeMarkAttr('fieldId')
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+  .col-end {
+    text-align: end;
+  }
+  .col-center {
+    padding: 0 5px;
+  }
+  .ope-item {
+    height: 100%;
+    line-height: 100%;
+    background-color: #FFFFFF;
+    background-image: none;
+    border: 1px solid #DCDFE6;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+  }
+  .i-row-container {
+    width: 15px;
+    font-size: 12px !important;
+    float: right;
+    i {
+      cursor: pointer;
+      &:hover {
+        color: var(--primary, #3370ff);
+        border-color: var(--primary, #3370ff);
+      }
+    }
+  }
+  .flex-column {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+  }
+  .number-range-input {
+    width: 45%;
+  }
+  .number-range-span {
+    padding: 0 2px;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/map/MarkMapDataEditor.vue b/frontend/src/views/chart/components/map/MarkMapDataEditor.vue
new file mode 100644
index 0000000000..92097c5785
--- /dev/null
+++ b/frontend/src/views/chart/components/map/MarkMapDataEditor.vue
@@ -0,0 +1,669 @@
+<template>
+
+  <div>
+    <el-row
+      class="padding-lr"
+    >
+      <span class="data-area-label">
+        <span>{{ $t('chart.longitude') }}</span>
+        <span> / </span>
+        <span> {{ $t('chart.dimension') }}</span>
+        <i
+          class="el-icon-arrow-down el-icon-delete data-area-clear"
+          @click="clearData('locationXaxis')"
+        />
+      </span>
+      <draggable
+        v-model="busiFieldMap.locationXaxis"
+        group="drag"
+        animation="300"
+        :move="onMove"
+        class="drag-block-style"
+        @add="addLocationXaxis"
+        @update="calcData(true)"
+      >
+        <transition-group class="draggable-group">
+          <detail-item
+            v-for="(item,index) in busiFieldMap.locationXaxis"
+            :key="item.id"
+            :param="param"
+            :index="index"
+            :item="item"
+            :dimension-data="dimension"
+            :quota-data="quota"
+            @onDetailItemRemove="locationXItemRemove"
+          />
+        </transition-group>
+      </draggable>
+      <div
+        v-if="!busiFieldMap.locationXaxis || busiFieldMap.locationXaxis.length === 0"
+        class="drag-placeholder-style"
+      >
+        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+      </div>
+    </el-row>
+    <el-row
+
+      class="padding-lr"
+    >
+      <span class="data-area-label">
+        <span>{{ $t('chart.latitude') }} / {{ $t('chart.dimension') }}</span>
+        <i
+          class="el-icon-arrow-down el-icon-delete data-area-clear"
+          @click="clearData('locationYaxis')"
+        />
+      </span>
+      <draggable
+        v-model="busiFieldMap.locationYaxis"
+        group="drag"
+        animation="300"
+        :move="onMove"
+        class="drag-block-style"
+        @add="addLocationYaxis"
+        @update="calcData(true)"
+      >
+        <transition-group class="draggable-group">
+          <detail-item
+            v-for="(item,index) in busiFieldMap.locationYaxis"
+            :key="item.id"
+            :param="param"
+            :index="index"
+            :item="item"
+            :dimension-data="dimension"
+            :quota-data="quota"
+            @onDetailItemRemove="locationYItemRemove"
+          />
+        </transition-group>
+      </draggable>
+      <div
+        v-if="!busiFieldMap.locationYaxis || busiFieldMap.locationYaxis.length === 0"
+        class="drag-placeholder-style"
+      >
+        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+      </div>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import DetailItem from '@/views/chart/components/dragItem/DetailItem'
+export default {
+  name: 'MarkMapDataEditor',
+  components: { DetailItem },
+  props: {
+    view: {
+      type: Object,
+      require: true
+    },
+    param: {
+      type: Object,
+      required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      busiFieldMap: {
+        locationXaxis: [],
+        locationYaxis: [],
+        daxis: []
+      }
+    }
+  },
+  created() {
+    this.releaseViewFields()
+  },
+  methods: {
+    fillViewFields() {
+      const result = []
+      for (const key in this.busiFieldMap) {
+        if (Object.hasOwnProperty.call(this.busiFieldMap, key)) {
+          const element = JSON.parse(JSON.stringify(this.busiFieldMap[key]))
+          element.forEach(item => {
+            item.busiType = key
+            result.push(item)
+          })
+        }
+      }
+      this.view.viewFields = result
+    },
+    releaseViewFields() {
+      this.view.viewFields.forEach(item => {
+        const busiType = item.busiType
+        if (this.busiFieldMap?.[busiType]) {
+          this.busiFieldMap[busiType].push(item)
+        }
+      })
+    },
+    clearData(type) {
+      this.busiFieldMap[type] = []
+      this.calcData(true)
+    },
+    onMove(e, originalEvent) {
+      this.moveId = e.draggedContext.element.id
+      return true
+    },
+    dragCheckType(list, type) {
+      if (list && list.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].groupType !== type) {
+            list.splice(i, 1)
+          }
+        }
+      }
+    },
+    dragMoveDuplicate(list, e) {
+      const that = this
+      const dup = list.filter(function(m) {
+        return m.id === that.moveId
+      })
+      if (dup && dup.length > 1) {
+        list.splice(e.newDraggableIndex, 1)
+      }
+    },
+
+    addDaxis(e) {
+      this.dragCheckType(this.busiFieldMap.daxis, 'd')
+      this.dragMoveDuplicate(this.busiFieldMap.daxis, e)
+      this.calcData(true)
+    },
+    addLocationXaxis(e) {
+      this.dragCheckType(this.busiFieldMap.locationXaxis, 'd')
+      this.dragMoveDuplicate(this.busiFieldMap.locationXaxis, e)
+      this.busiFieldMap.locationXaxis = [this.busiFieldMap.locationXaxis[0]]
+      this.calcData(true)
+    },
+    addLocationYaxis(e) {
+      this.dragCheckType(this.busiFieldMap.locationYaxis, 'd')
+      this.dragMoveDuplicate(this.busiFieldMap.locationYaxis, e)
+      this.busiFieldMap.locationYaxis = [this.busiFieldMap.locationYaxis[0]]
+      this.calcData(true)
+    },
+    locationXItemRemove(item) {
+      this.busiFieldMap.locationXaxis.splice(item.index, 1)
+      this.calcData(true)
+    },
+    locationYItemRemove(item) {
+      this.busiFieldMap.locationYaxis.splice(item.index, 1)
+      this.calcData(true)
+    },
+    detailItemRemove(item) {
+      this.busiFieldMap.daxis.splice(item.index, 1)
+      this.calcData(true)
+    },
+    calcData(cahce) {
+      this.fillViewFields()
+      this.$emit('calc-data', cahce)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.padding-lr {
+  padding: 0 6px;
+}
+
+.itxst {
+  margin: 10px;
+  text-align: left;
+}
+
+.col {
+  width: 40%;
+  flex: 1;
+  padding: 10px;
+  border: solid 1px #eee;
+  border-radius: 5px;
+  float: left;
+}
+
+.col + .col {
+  margin-left: 10px;
+}
+
+.view-panel-row {
+  display: flex;
+  background-color: #f7f8fa;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100vh - 96px);
+}
+
+.view-panel-Mask {
+  display: flex;
+  height: calc(100vh - 80px);
+  background-color: rgba(92, 94, 97, 0.7);
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 350px;
+  z-index: 2;
+  cursor: not-allowed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.view-panel {
+  display: flex;
+  height: 100%;
+  background-color: #f7f8fa;
+}
+
+.blackTheme .view-panel {
+  background-color: var(--MainBG);
+}
+
+.drag-list {
+  height: calc(100% - 26px);
+  overflow: auto;
+  padding: 2px 0;
+}
+
+.item-dimension {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: relative;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 2px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  color: var(--Main);
+  background: var(--ContentBG);
+  cursor: pointer;
+}
+
+.item-quota {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: relative;
+}
+
+.blackTheme .item-quota {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-quota + .item-quota {
+  margin-top: 2px;
+}
+
+.item-quota:hover {
+  color: #67c23a;
+  background: #f0f9eb;
+  border-color: #b2d3a3;
+  cursor: pointer;
+}
+
+.blackTheme .item-quota:hover {
+  background: var(--ContentBG);
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+
+span {
+  font-size: 12px;
+}
+
+.tab-header ::v-deep .el-tabs__header {
+  border-top: solid 1px #eee;
+  border-right: solid 1px #eee;
+}
+
+.tab-header ::v-deep .el-tabs__item {
+  font-size: 12px;
+  padding: 0 20px !important;
+}
+
+.blackTheme .tab-header ::v-deep .el-tabs__item {
+  background-color: var(--MainBG);
+}
+
+.tab-header ::v-deep .el-tabs__nav-scroll {
+  padding-left: 0 !important;
+}
+
+.tab-header ::v-deep .el-tabs__header {
+  margin: 0 !important;
+}
+
+.tab-header ::v-deep .el-tabs__content {
+  height: calc(100% - 40px);
+}
+
+.draggable-group {
+  display: block;
+  width: 100%;
+  height: calc(100% - 6px);
+}
+
+.chart-icon {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.el-radio {
+  margin: 5px;
+}
+
+.el-radio ::v-deep .el-radio__label {
+  padding-left: 0;
+}
+
+.attr-style {
+  height: calc(100vh - 76px - 60px - 40px - 40px);
+}
+
+.blackTheme .attr-style {
+  color: var(--TextPrimary);
+}
+
+.attr-selector {
+  width: 100%;
+  height: 100%;
+  margin: 6px 0;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  background-color: white
+}
+
+.blackTheme .attr-selector {
+
+  background-color: var(--MainBG)
+}
+
+.disabled-none-cursor {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.chart-class {
+  height: 100%;
+  padding: 10px;
+}
+
+.table-class {
+  height: calc(100% - 20px);
+}
+
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
+
+.filter-btn-class {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chart-error-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ece7e7;
+}
+
+.blackTheme .chart-error-class {
+
+  background-color: var(--MainBG)
+}
+
+.field-height {
+  height: 100%;
+  border-top: 1px solid #E6E6E6;
+}
+
+.blackTheme .field-height {
+
+  border-top: 1px solid;
+  border-color: var(--TableBorderColor) !important;
+}
+
+.padding-tab {
+  padding: 0;
+  height: 100%;
+}
+
+.tree-select-span {
+  ::v-deep div.vue-treeselect__control {
+    height: 32px !important;
+    font-weight: normal !important;
+  }
+}
+
+.drag-block-style {
+  padding: 2px 0 0 0;
+  width: 100%;
+  min-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  overflow-x: hidden;
+  display: flex;
+  align-items: center;
+  background-color: white;
+}
+
+.blackTheme .drag-block-style {
+  border: 1px solid;
+  border-color: var(--TableBorderColor);
+  background-color: var(--ContentBG);
+}
+
+.drag-placeholder-style {
+  position: absolute;
+  top: calc(50% - 2px);
+  left: 0;
+  width: 100%;
+  color: #CCCCCC;
+}
+
+.blackTheme .drag-placeholder-style {
+  color: var(--TextPrimary);
+}
+
+.drag-placeholder-style-span {
+  padding-left: 16px;
+}
+
+.blackTheme .theme-border-class {
+  color: var(--TextPrimary) !important;
+  background-color: var(--ContentBG);
+}
+
+.blackTheme .padding-lr {
+  border-color: var(--TableBorderColor) !important;
+}
+
+.blackTheme .theme-item-class {
+  background-color: var(--MainBG) !important;
+  border-color: var(--TableBorderColor) !important;
+}
+
+.icon-class {
+  color: #6c6c6c;
+}
+
+.blackTheme .icon-class {
+  color: #cccccc;
+}
+
+.result-count {
+  width: 50px;
+}
+
+.result-count ::v-deep input {
+  padding: 0 4px;
+}
+
+.radio-span ::v-deep .el-radio__label {
+  margin-left: 4px;
+}
+
+.view-title-name {
+  display: -moz-inline-box;
+  display: inline-block;
+  width: 130px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-left: 45px;
+}
+
+::v-deep .item-axis {
+  width: 168px !important;
+}
+
+::v-deep .el-slider__input {
+  width: 80px !important;
+}
+
+::v-deep .el-input-number--mini {
+  width: 100px !important;
+}
+
+::v-deep .el-slider__runway.show-input {
+  width: 80px !important;
+}
+
+.no-senior {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  padding-top: 40px;
+  overflow: auto;
+  border-right: 1px solid #e6e6e6;
+  height: 100%;
+}
+
+.form-item-slider::v-deep.el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item::v-deep.el-form-item__label {
+  font-size: 12px;
+}
+
+.field-name {
+  display: inline-block;
+  width: 90px;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  top: 2px;
+}
+
+.field-setting {
+  position: absolute;
+  right: 8px;
+}
+
+.father .child {
+  visibility: hidden;
+}
+
+.father:hover .child {
+  visibility: visible;
+}
+
+.field-split {
+  height: calc(100% - 40px);
+}
+
+.field-split ::v-deep .fu-split-pane__left {
+  padding-right: 0 !important;
+}
+
+.field-split ::v-deep .fu-split-pane__right {
+  padding-left: 0 !important;
+}
+
+.view-panel-row ::v-deep .el-collapse-item__header {
+  height: 34px !important;
+  line-height: 34px !important;
+  padding: 0 0 0 6px !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+}
+
+.data-area-label {
+  text-align: left;
+  position: relative;
+  width: 100%;
+  display: inline-block;
+}
+
+.data-area-clear {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  color: rgb(135, 141, 159);
+  cursor: pointer;
+  z-index: 1;
+}
+</style>
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 373864104a..71b75c6e52 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -21,6 +21,7 @@
         :row-style="getRowStyle"
         class="table-class"
         :class="chart.id"
+        :merge-cells="mergeCells"
         :show-summary="showSummary"
         :summary-method="summaryMethod"
         :index-config="{seqMethod}"
@@ -32,12 +33,20 @@
         <ux-table-column
           v-for="field in fields"
           :key="field.name"
-          :field="field.dataeaseName"
+          :field="field.child ? '' : field.dataeaseName"
           :resizable="true"
-          sortable
+          :sortable="(!field.child || !field.child.length)"
           :title="field.name"
           :width="columnWidth"
-        />
+        >
+          <ux-table-column
+            v-for="item in field.child"
+            :key="field.name + item.name"
+            :field="item.dataeaseName"
+            :title="item.name"
+            :width="columnWidth"
+          />
+        </ux-table-column>
       </ux-grid>
 
       <el-row
@@ -117,6 +126,7 @@ export default {
   data() {
     return {
       fields: [],
+      detailFields: [],
       height: 'auto',
       title_class: {
         margin: '0 0',
@@ -167,7 +177,8 @@ export default {
       totalStyle: {
         color: '#606266'
       },
-      not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET
+      not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET,
+      mergeCells: []
     }
   },
   computed: {
@@ -235,7 +246,15 @@ export default {
       let data = []
       this.showPage = false
       if (this.chart.data) {
-        this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
+        const fields = JSON.parse(JSON.stringify(this.chart.data.fields))
+        if (this.chart.data.detailFields) {
+          fields.forEach(field => {
+            if (field.id === 'DataEase-Detail' && field.dataeaseName === 'detail') {
+              field.child = JSON.parse(JSON.stringify(this.chart.data.detailFields))
+            }
+          })
+        }
+        this.fields = fields
         const attr = JSON.parse(this.chart.customAttr)
         this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
 
@@ -269,13 +288,38 @@ export default {
         data = []
         this.resetPage()
       }
-      data.forEach(item => {
-        Object.keys(item).forEach(key => {
-          if (typeof item[key] === 'object') {
-            item[key] = ''
+      if (this.chart.data.detailFields?.length) {
+        let result = []
+        let groupRowIndex = 0
+        data.forEach(item => {
+          const baseObj = JSON.parse(JSON.stringify(item))
+          delete baseObj.details
+
+          const details = JSON.parse(JSON.stringify(item.details))
+          let colsIndex = this.fields.length - 1
+          while (colsIndex--) {
+            const mergeItem = {
+              row: groupRowIndex,
+              col: colsIndex,
+              rowspan: details.length,
+              colspan: 1
+            }
+            this.mergeCells.push(mergeItem)
           }
+          groupRowIndex += details.length
+          result = result.concat(details.map(detail => Object.assign(detail, baseObj)))
         })
-      })
+        data = result
+      } else {
+        data.forEach(item => {
+          Object.keys(item).forEach(key => {
+            if (typeof item[key] === 'object') {
+              item[key] = ''
+            }
+          })
+        })
+      }
+
       this.$refs.plxTable.reloadData(data)
       this.$nextTick(() => {
         this.initStyle()
@@ -295,6 +339,12 @@ export default {
           if (this.chart.data) {
             if (this.chart.type === 'table-info') {
               tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
+            } else if (this.chart.data.detailFields?.length) {
+              let rowLength = 0
+              this.chart.data.tableRow.forEach(row => {
+                rowLength += (row?.details?.length || 1)
+              })
+              tableHeight = (rowLength + 2) * 36 - pageHeight
             } else {
               tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight
             }
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 8e65f66030..4931d8baba 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -863,6 +863,17 @@
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
+
+                    <mark-map-data-editor
+                      v-if="view.type === 'map'"
+                      :view="view"
+                      :param="param"
+                      :dimension-data="dimension"
+                      :quota-data="quota"
+                      @clear-data="clearData"
+                      @calc-data="calcData"
+                    />
+
                     <el-row
                       class="padding-lr"
                       style="margin-top: 6px;"
@@ -988,6 +999,7 @@
             @onMarginChange="onMarginChange"
             @onChangeBackgroundForm="onChangeBackgroundForm"
             @onSuspensionChange="onSuspensionChange"
+            @onMarkChange="onMarkChange"
           />
         </el-tab-pane>
         <el-tab-pane
@@ -1670,7 +1682,7 @@ import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
 import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
 import { equalsAny } from '@/utils/StringUtils'
 import PositionAdjust from '@/views/chart/view/PositionAdjust'
-
+import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
 export default {
   name: 'ChartEdit',
   components: {
@@ -1707,7 +1719,8 @@ export default {
     DrillItem,
     DrillPath,
     PluginCom,
-    MapMapping
+    MapMapping,
+    MarkMapDataEditor
   },
   props: {
     param: {
@@ -2499,7 +2512,14 @@ export default {
       this.view.customAttr.suspension = val
       this.calcStyle()
     },
-
+    onMarkChange(val) {
+      this.view.customAttr.mark = val
+      if (val.modifyName === 'fieldId') {
+        this.calcData()
+      } else {
+        this.calcStyle()
+      }
+    },
     onSizeChange(val) {
       this.view.customAttr.size = val
       this.calcData()
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index 86a2d42bb2..e206fe567f 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -310,6 +310,34 @@
           </el-collapse-item>
         </el-collapse>
       </el-row>
+
+      <el-row
+        v-show="showPropertiesCollapse(['condition-style-selector'])"
+        class="de-collapse-style"
+      >
+        <span class="padding-lr">{{ $t('chart.function_style') }}</span>
+        <el-collapse
+          v-model="styleActiveNames"
+          class="style-collapse"
+        >
+          <el-collapse-item
+            v-show="showPropertiesCollapse(['condition-style-selector'])"
+            name="conditionStyle"
+            :title="$t('chart.condition_style')"
+          >
+
+            <map-mark-selector
+              :param="param"
+              class="attr-selector"
+              :chart="chart"
+              :view="view"
+              :dimension-data="dimensionData"
+              :quota-data="quotaData"
+              @onMarkChange="onMarkChange"
+            />
+          </el-collapse-item>
+        </el-collapse>
+      </el-row>
     </div>
   </el-row>
 </template>
@@ -338,6 +366,7 @@ import BackgroundColorSelector from '@/views/chart/components/componentStyle/Bac
 import SplitSelector from '@/views/chart/components/componentStyle/SplitSelector'
 import SplitSelectorAntV from '@/views/chart/components/componentStyle/SplitSelectorAntV'
 import SuspensionSelector from '@/components/suspensionSelector'
+import MapMarkSelector from '@/views/chart/components/functionStyle/MapMarkSelector'
 import { mapState } from 'vuex'
 
 export default {
@@ -366,7 +395,8 @@ export default {
     ColorSelector,
     MarginSelector,
     PluginCom,
-    SuspensionSelector
+    SuspensionSelector,
+    MapMarkSelector
   },
   props: {
     chart: {
@@ -498,6 +528,10 @@ export default {
     onChangeBackgroundForm(val, propertyName) {
       val['propertyName'] = propertyName
       this.$emit('onChangeBackgroundForm', val)
+    },
+    onMarkChange(val, propertyName) {
+      val['propertyName'] = propertyName
+      this.$emit('onMarkChange', val)
     }
   }
 }
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 459a5938bd..6f079d4649 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -94,6 +94,17 @@ module.exports = {
         deleteOriginalAssets: true // 删除源文件
       })) */
     }
+
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/deicons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: '[name]'
+      })
   },
   css: {
     loaderOptions: {
@@ -102,7 +113,7 @@ module.exports = {
       }
     },
     extract: {
-      ignoreOrder: true,
+      ignoreOrder: true
     }
   }