diff --git a/backend/pom.xml b/backend/pom.xml
index 0ffce51cf3..3783dad76e 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -216,6 +216,11 @@
             <artifactId>dataease-plugin-interface</artifactId>
             <version>1.7</version>
         </dependency>
+        <dependency>
+            <groupId>io.dataease</groupId>
+            <artifactId>dataease-plugin-view</artifactId>
+            <version>1.7</version>
+        </dependency>
         <dependency>
             <groupId>cn.hutool</groupId>
             <artifactId>hutool-all</artifactId>
diff --git a/backend/src/main/java/io/dataease/plugins/server/view/PluginViewServer.java b/backend/src/main/java/io/dataease/plugins/server/view/PluginViewServer.java
new file mode 100644
index 0000000000..d57b1088ab
--- /dev/null
+++ b/backend/src/main/java/io/dataease/plugins/server/view/PluginViewServer.java
@@ -0,0 +1,33 @@
+package io.dataease.plugins.server.view;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.Map.Entry;
+
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import io.dataease.plugins.config.SpringContextUtil;
+import io.dataease.plugins.view.entity.PluginViewType;
+import io.dataease.plugins.view.service.ViewPluginService;
+
+@RequestMapping("/plugin/view")
+@RestController
+public class PluginViewServer {
+
+    @PostMapping("/types")
+    public List<PluginViewType> types() {
+        List<PluginViewType> result = new ArrayList<>();
+        Map<String, ViewPluginService> beanMap = SpringContextUtil.getApplicationContext()
+                .getBeansOfType(ViewPluginService.class);
+        if (beanMap.keySet().size() == 0) {
+            return result;
+        }
+        for (Entry<String, ViewPluginService> entry : beanMap.entrySet()) {
+            result.add(entry.getValue().viewType());
+        }
+        return result;
+    }
+}
diff --git a/frontend/src/api/chart/chart.js b/frontend/src/api/chart/chart.js
index 87abbcd662..d143acf1da 100644
--- a/frontend/src/api/chart/chart.js
+++ b/frontend/src/api/chart/chart.js
@@ -69,3 +69,10 @@ export function ajaxGetDataOnly(id, data) {
     data
   })
 }
+
+export function pluginTypes() {
+  return request({
+    url: '/plugin/view/types',
+    method: 'post'
+  })
+}
diff --git a/frontend/src/icons/svg/buddle-map.svg b/frontend/src/icons/svg/buddle-map.svg
new file mode 100644
index 0000000000..a56a4cf8c7
--- /dev/null
+++ b/frontend/src/icons/svg/buddle-map.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 t="1644388374047" class="icon" viewBox="0 0 1303 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4486" xmlns:xlink="http://www.w3.org/1999/xlink" width="254.4921875" height="200"><defs><style type="text/css"></style></defs><path d="M1303.272727 188.881455V82.106182h-8.704l-30.394182 32.861091c-4.328727 4.096-8.704 4.096-13.032727 4.096h-13.032727c-4.328727 0-13.032727-4.096-13.032727-8.192l-21.736728-16.430546c-4.328727-4.096-8.657455-8.238545-13.032727-8.238545h-26.065454c-4.328727 0-13.032727-4.096-17.361455-8.192L1099.077818 12.334545c-4.328727-4.142545-8.657455-8.238545-13.032727-8.238545L1055.650909 0h-8.704l-47.755636 16.430545v24.669091l-8.704 53.341091c0 4.096-4.328727 8.192-4.328728 8.192L977.454545 110.871273c-4.328727 4.096-8.704 4.096-13.032727 4.096h-8.704c-8.657455 0-17.361455 4.096-17.361454 12.334545l-8.704 20.48a18.199273 18.199273 0 0 0 17.408 24.669091h21.690181l17.408-12.334545 13.032728 8.238545c8.657455 8.192 4.328727 24.669091-8.704 28.718546l-39.098182 12.334545v24.669091h-39.098182l-8.704 24.622545-34.722909-4.142545c-8.704 0-13.032727 4.142545-17.408 8.238545l-8.657455 12.288 13.032728 12.334546-34.769455 36.957091c-4.328727 4.096-8.704 4.096-13.032727 4.096h-52.130909c-4.328727 0-8.704 0-13.032727 4.096l-13.032728 12.334545c-4.328727 4.096-8.704 4.096-13.032727 4.096h-39.098182c-4.328727 0-8.704 0-13.032727-4.096l-26.065455-20.526545c-4.328727 0-4.328727-4.096-8.704-4.096l-95.557818-4.096c-4.328727 0-8.704-4.142545-13.032727-8.238546l-52.130909-65.675636c-4.328727-4.142545-8.704-8.238545-13.032727-8.238546h-4.328728c-8.704 0-17.408-8.192-17.408-16.430545v-28.718545l-4.328727-24.669091c0-4.096-4.328727-8.192-8.704-12.288H390.981818c-4.328727 0-8.704-4.096-8.704-8.238546l-8.657454-24.622545H351.883636l-13.032727 16.430545h-21.736727v20.526546H273.687273c-4.328727 0-13.032727 4.096-13.032728 8.238545l-17.361454 24.622546c-4.375273 4.096-8.704 8.192-17.408 8.192h-21.690182c-8.704 0-17.408 8.238545-17.408 16.430545v24.669091c0 4.096 0 8.192-4.328727 8.192l-13.032727 20.48c-4.328727 4.189091-4.328727 8.238545-13.032728 8.238545l-47.802182 12.334546H34.769455c-4.375273 0-8.704 4.096-13.032728 4.096l-13.032727 16.430545C0 320.279273 0 324.421818 0 328.471273v20.526545h17.361455V414.72c0 4.096 4.375273 8.192 8.704 12.288l30.394181 24.669091c4.375273 4.096 4.375273 4.096 4.375273 8.192l8.657455 28.765091v53.341091H52.130909v32.861091c0 4.096 4.328727 8.192 4.328727 12.334545l39.098182 32.814546h21.736727l86.900364 82.152727 4.328727 4.096 73.867637 28.718545 13.032727-16.384h26.065455c8.657455 0 13.032727 4.096 17.361454 8.192l13.032727 24.669091c4.328727 4.049455 8.704 8.192 17.361455 8.192H390.981818c4.328727 0 4.328727 0 8.704-4.142545l43.426909-24.622546c4.328727-4.096 13.032727-4.096 17.361455 0l39.098182 16.430546v-16.430546h21.736727l8.704 24.669091v36.910546c0 4.142545 0 8.238545-4.375273 12.334545l-21.690182 20.526546v20.526545l17.361455 4.096c4.328727 0 13.032727 4.142545 13.032727 12.334545l4.328727 12.334546v28.718545l43.473455 28.765091a13.824 13.824 0 0 0 8.657455 4.096h8.704c8.704 0 17.361455-8.238545 17.361454-16.430545s8.704-16.430545 17.408-16.430546h43.426909c4.328727 0 8.704 0 13.032727-4.096l13.032728-8.192c8.704-4.142545 17.361455-4.142545 26.065454 4.096l30.394182 32.814546c4.375273 4.142545 8.704 8.238545 13.032727 8.238545h52.130909l4.375273 20.526546-30.440727 32.861091v20.48l21.736727 12.334545c8.704 4.142545 21.736727 0 26.065455-8.192l21.736727-28.765091c4.328727-4.096 4.328727-8.192 4.328727-12.288l-4.328727-28.765091c0-8.192 4.328727-20.48 13.032727-20.48l30.394182-8.238545h8.704l17.361455 4.096 21.736727-8.192 4.328727-20.526546c0-8.238545 8.704-12.334545 13.032727-12.334545l26.065455-8.238546c4.328727 0 4.328727 0 8.704-4.096l82.525091-69.818181c4.328727-4.096 4.328727-4.096 4.328727-8.192l13.032727-61.579637c0-4.096 4.375273-8.192 8.704-12.334545l21.736728-12.288c4.328727-4.142545 8.657455-12.334545 8.657454-16.430546l-8.657454-73.914181c0-4.096-4.375273-8.192-8.704-12.334546l-17.361455-12.288c-4.375273-4.142545-8.704-8.238545-8.704-12.334545l-4.328727-16.430546c0-4.096-4.375273-8.192-8.704-12.288l-30.394182-24.669091c-8.704-4.096-8.704-16.430545-4.375273-24.622545l17.408-28.765091c0-4.096 4.328727-4.096 8.657455-8.192l34.769454-12.334546v-20.48h-34.769454c-4.328727 0-13.032727 4.096-17.361455 8.192l-13.032727 16.430546-13.032727 12.288-4.328727-20.48-30.440728-8.238546L1081.716364 344.901818l8.704 12.334546v24.622545c0 4.096 0 12.334545 4.328727 12.334546l4.328727 4.096a29.090909 29.090909 0 0 0 26.065455 0l60.834909-57.483637c4.328727-4.096 4.328727-8.238545 4.328727-16.430545l-4.328727-16.430546 39.098182-4.096c4.328727 0 8.704-4.096 13.032727-4.096l34.769454-32.861091c4.328727-4.096 8.657455-12.334545 4.328728-20.526545l-21.736728-45.149091 17.408-16.430545H1303.272727v4.096z" fill="#C1CADC" p-id="4487"></path><path d="M407.272727 551.377455a22.481455 22.481455 0 0 1-17.221818-8.378182c-0.791273-0.930909-1.768727-1.954909-2.792727-3.211637a482.397091 482.397091 0 0 1-29.323637-37.236363 302.917818 302.917818 0 0 1-18.01309-28.392728C330.565818 457.122909 325.818182 442.973091 325.818182 432.128c0-10.472727 2.141091-20.619636 6.376727-30.208 4.096-9.216 10.007273-17.547636 17.454546-24.669091 7.447273-7.121455 16.197818-12.706909 25.879272-16.616727a84.526545 84.526545 0 0 1 63.488 0c9.681455 3.909818 18.385455 9.495273 25.879273 16.616727 7.447273 7.121455 13.358545 15.453091 17.454545 24.669091 4.189091 9.588364 6.376727 19.735273 6.376728 30.254545 0 10.798545-4.747636 24.948364-14.103273 41.984a298.542545 298.542545 0 0 1-17.966545 28.392728 469.504 469.504 0 0 1-29.323637 37.236363l-2.699636 3.025455a22.714182 22.714182 0 0 1-17.268364 8.564364H407.272727zM672.023273 787.688727a16.523636 16.523636 0 0 1-12.939637-6.702545l-2.094545-2.56a384.186182 384.186182 0 0 1-22.016-29.789091 245.154909 245.154909 0 0 1-13.498182-22.714182c-6.981818-13.637818-10.565818-24.948364-10.565818-33.652364a62.510545 62.510545 0 0 1 37.282909-57.204363c7.540364-3.258182 15.546182-4.887273 23.784727-4.933818h0.046546a59.950545 59.950545 0 0 1 43.194182 18.245818 61.998545 61.998545 0 0 1 17.873454 43.892363c0 8.704-3.537455 20.014545-10.565818 33.652364-3.630545 6.981818-8.145455 14.615273-13.498182 22.714182a373.946182 373.946182 0 0 1-22.016 29.789091l-2.001454 2.420363a16.663273 16.663273 0 0 1-12.939637 6.842182h-0.093091zM896 669.556364a34.676364 34.676364 0 0 1-25.786182-11.729455l-4.235636-4.514909a682.961455 682.961455 0 0 1-44.032-52.130909 421.143273 421.143273 0 0 1-26.996364-39.749818c-14.010182-23.877818-21.131636-43.659636-21.131636-58.833455 0-14.661818 3.258182-28.858182 9.588363-42.263273a108.916364 108.916364 0 0 1 26.158546-34.583272c11.217455-9.960727 24.296727-17.826909 38.865454-23.272728a134.795636 134.795636 0 0 1 47.569455-8.610909h0.046545c16.523636 0 32.488727 2.885818 47.569455 8.610909 14.568727 5.445818 27.601455 13.312 38.818909 23.272728 11.170909 10.007273 20.014545 21.597091 26.205091 34.583272 6.330182 13.358545 9.541818 27.601455 9.541818 42.263273 0 15.173818-7.121455 34.955636-21.131636 58.833455-7.214545 12.241455-16.290909 25.6-26.996364 39.703272a664.715636 664.715636 0 0 1-44.032 52.177455l-3.956363 4.235636a35.002182 35.002182 0 0 1-25.925819 12.008728h-0.139636z" fill="#8A90A2" p-id="4488"></path><path d="M1066.356364 850.385455c0 2.932364-7.447273 2.932364-7.447273 5.864727v23.319273c0 2.932364 0 5.864727 7.447273 8.750545l29.556363 17.547636 22.248728-11.682909c0-2.932364 7.400727-2.932364 7.400727-5.864727l14.801454-61.253818h-37.050181l-37.003637 23.365818z" fill="#C1CADC" p-id="4489"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 9f8248118f..f4272a1bfb 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -24,9 +24,11 @@ import DeComplexSelect from '@/components/business/condition-table/DeComplexSele
 import '@/components/canvas/custom-component' // 注册自定义组件
 
 import '@/utils/DateUtil'
+import draggable from 'vuedraggable'
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
 Vue.use(widgets)
+Vue.component('draggable', draggable)
 Vue.prototype.$api = api
 
 import * as echarts from 'echarts'
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 1bec7413d9..4991c2a24b 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -26,3 +26,284 @@ export function digToHex(dig) {
   }
   return prefix.concat(num.toString(16).toUpperCase())
 }
+
+export const TYPE_CONFIGS = [
+  {
+    render: 'antv',
+    category: 'chart.chart_type_table',
+    value: 'table-normal',
+    title: 'chart.chart_table_normal',
+    icon: 'table-normal'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_table',
+    value: 'table-info',
+    title: 'chart.chart_table_info',
+    icon: 'table-info'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_table',
+    value: 'table-pivot',
+    title: 'chart.chart_table_pivot',
+    icon: 'table-pivot'
+  },
+
+  {
+    render: 'antv',
+    category: 'chart.chart_type_quota',
+    value: 'text',
+    title: 'chart.chart_card',
+    icon: 'text'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_quota',
+    value: 'gauge',
+    title: 'chart.chart_gauge',
+    icon: 'gauge'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_quota',
+    value: 'liquid',
+    title: 'chart.chart_liquid',
+    icon: 'liquid'
+  },
+
+  {
+    render: 'antv',
+    category: 'chart.chart_type_trend',
+    value: 'line',
+    title: 'chart.chart_line',
+    icon: 'line'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_trend',
+    value: 'line-stack',
+    title: 'chart.chart_line_stack',
+    icon: 'line-stack'
+  },
+
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'bar',
+    title: 'chart.chart_bar',
+    icon: 'bar'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'bar-stack',
+    title: 'chart.chart_bar_stack',
+    icon: 'bar-stack'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'waterfall',
+    title: 'chart.chart_waterfall',
+    icon: 'waterfall'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'bar-horizontal',
+    title: 'chart.chart_bar_horizontal',
+    icon: 'bar-horizontal'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'bar-stack-horizontal',
+    title: 'chart.chart_bar_stack_horizontal',
+    icon: 'bar-stack-horizontal'
+  },
+
+  {
+    render: 'antv',
+    category: 'chart.chart_type_distribute',
+    value: 'pie',
+    title: 'chart.chart_pie',
+    icon: 'pie'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_distribute',
+    value: 'pie-rose',
+    title: 'chart.chart_pie_rose',
+    icon: 'pie-rose'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_distribute',
+    value: 'radar',
+    title: 'chart.chart_radar',
+    icon: 'radar'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_distribute',
+    value: 'treemap',
+    title: 'chart.chart_treemap',
+    icon: 'treemap'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_distribute',
+    value: 'word-cloud',
+    title: 'chart.chart_word_cloud',
+    icon: 'word-cloud'
+  },
+
+  {
+    render: 'antv',
+    category: 'chart.chart_type_relation',
+    value: 'scatter',
+    title: 'chart.chart_scatter',
+    icon: 'scatter'
+  },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_relation',
+    value: 'funnel',
+    title: 'chart.chart_funnel',
+    icon: 'funnel'
+  },
+  /* 下面是echarts图表类型 */
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_table',
+    value: 'table-normal',
+    title: 'chart.chart_table_normal',
+    icon: 'table-normal'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_table',
+    value: 'table-info',
+    title: 'chart.chart_table_info',
+    icon: 'table-info'
+  },
+
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_quota',
+    value: 'text',
+    title: 'chart.chart_card',
+    icon: 'text'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_quota',
+    value: 'gauge',
+    title: 'chart.chart_gauge',
+    icon: 'gauge'
+  },
+
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_trend',
+    value: 'line',
+    title: 'chart.chart_line',
+    icon: 'line'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_trend',
+    value: 'line-stack',
+    title: 'chart.chart_line_stack',
+    icon: 'line-stack'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_trend',
+    value: 'chart-mix',
+    title: 'chart.chart_mix',
+    icon: 'chart-mix'
+  },
+
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_compare',
+    value: 'bar',
+    title: 'chart.chart_bar',
+    icon: 'bar'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_compare',
+    value: 'bar-stack',
+    title: 'chart.chart_bar_stack',
+    icon: 'bar-stack'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_compare',
+    value: 'bar-horizontal',
+    title: 'chart.chart_bar_horizontal',
+    icon: 'bar-horizontal'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_compare',
+    value: 'bar-stack-horizontal',
+    title: 'chart.chart_bar_stack_horizontal',
+    icon: 'bar-stack-horizontal'
+  },
+
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_distribute',
+    value: 'pie',
+    title: 'chart.chart_pie',
+    icon: 'pie'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_distribute',
+    value: 'pie-rose',
+    title: 'chart.chart_pie_rose',
+    icon: 'pie-rose'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_distribute',
+    value: 'radar',
+    title: 'chart.chart_radar',
+    icon: 'radar'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_distribute',
+    value: 'treemap',
+    title: 'chart.chart_treemap',
+    icon: 'treemap'
+  },
+
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_relation',
+    value: 'scatter',
+    title: 'chart.chart_scatter',
+    icon: 'scatter'
+  },
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_relation',
+    value: 'funnel',
+    title: 'chart.chart_funnel',
+    icon: 'funnel'
+  },
+
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_space',
+    value: 'map',
+    title: 'chart.chart_map',
+    icon: 'map'
+  }
+]
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index a868617587..ee36986e32 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -219,348 +219,352 @@
                       </el-radio-group>
                     </el-row>
                   </el-row>
-                  <el-row v-if="view.type ==='map'" class="padding-lr">
-                    <span style="width: 80px;text-align: right;">
-                      <span>{{ $t('chart.map_range') }}</span>
-                    </span>
-                    <span class="tree-select-span">
-                      <treeselect
-                        ref="mapSelector"
-                        v-model="view.customAttr.areaCode"
-                        :options="places"
-                        :placeholder="$t('chart.select_map_range')"
-                        :normalizer="normalizer"
-                        :no-children-text="$t('commons.treeselect.no_children_text')"
-                        :no-options-text="$t('commons.treeselect.no_options_text')"
-                        :no-results-text="$t('commons.treeselect.no_results_text')"
-                        @input="calcData"
-                        @deselect="calcData"
-                      />
-                    </span>
-                  </el-row>
-                  <!--xAxisExt-->
-                  <el-row
-                    v-if="view.type === 'table-pivot'"
-                    class="padding-lr"
-                  >
-                    <span style="width: 80px;text-align: right;">
-                      <span>{{ $t('chart.table_pivot_row') }}</span>
-                      /
-                      <span>{{ $t('chart.dimension') }}</span>
-                    </span>
-                    <draggable
-                      v-model="view.xaxisExt"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="drag-block-style"
-                      @add="addXaxisExt"
-                      @update="calcData(true)"
-                    >
-                      <transition-group class="draggable-group">
-                        <dimension-ext-item
-                          v-for="(item,index) in view.xaxisExt"
-                          :key="item.id"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          @onDimensionItemChange="dimensionItemChange"
-                          @onDimensionItemRemove="dimensionItemRemove"
-                          @editItemFilter="showDimensionEditFilter"
-                          @onNameEdit="showRename"
+                  <plugin-com v-if="isPlugin" :component-name="view.type + '-data'" :obj="{view, param, chart}" />
+                  <div v-else>
+                    <el-row v-if="view.type ==='map'" class="padding-lr">
+                      <span style="width: 80px;text-align: right;">
+                        <span>{{ $t('chart.map_range') }}</span>
+                      </span>
+                      <span class="tree-select-span">
+                        <treeselect
+                          ref="mapSelector"
+                          v-model="view.customAttr.areaCode"
+                          :options="places"
+                          :placeholder="$t('chart.select_map_range')"
+                          :normalizer="normalizer"
+                          :no-children-text="$t('commons.treeselect.no_children_text')"
+                          :no-options-text="$t('commons.treeselect.no_options_text')"
+                          :no-results-text="$t('commons.treeselect.no_results_text')"
+                          @input="calcData"
+                          @deselect="calcData"
                         />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
-                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-                    </div>
-                  </el-row>
-                  <!--xAxis-->
-                  <el-row
-                    v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
-                    class="padding-lr"
-                  >
-                    <span style="width: 80px;text-align: right;">
-                      <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span
-                        v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
-                      >{{ $t('chart.drag_block_type_axis') }}</span>
-                      <span
-                        v-else-if="view.type && view.type.includes('pie')"
-                      >{{ $t('chart.drag_block_pie_label') }}</span>
-                      <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
-                      <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
-                      <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
-                      <span v-else-if="view.type && view.type.includes('treemap')">{{ $t('chart.drag_block_treemap_label') }}</span>
-                      <span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
-                      /
-                      <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
-                      <span
-                        v-else-if="view.type && view.type === 'table-info'"
-                      >{{ $t('chart.dimension_or_quota') }}</span>
-                    </span>
-                    <draggable
-                      v-model="view.xaxis"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="drag-block-style"
-                      @add="addXaxis"
-                      @update="calcData(true)"
+                      </span>
+                    </el-row>
+                    <!--xAxisExt-->
+                    <el-row
+                      v-if="view.type === 'table-pivot'"
+                      class="padding-lr"
                     >
-                      <transition-group class="draggable-group">
-                        <dimension-item
-                          v-for="(item,index) in view.xaxis"
-                          :key="item.id"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          @onDimensionItemChange="dimensionItemChange"
-                          @onDimensionItemRemove="dimensionItemRemove"
-                          @editItemFilter="showDimensionEditFilter"
-                          @onNameEdit="showRename"
-                        />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
-                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-                    </div>
-                  </el-row>
-                  <!--yaxis-->
-                  <el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
-                    <span style="width: 80px;text-align: right;">
-                      <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span
-                        v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall')"
-                      >{{ $t('chart.drag_block_value_axis') }}</span>
-                      <span
-                        v-else-if="view.type && view.type.includes('pie')"
-                      >{{ $t('chart.drag_block_pie_angel') }}</span>
-                      <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
-                      <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
-                      <span v-else-if="view.type && view.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
-                      <span
-                        v-else-if="view.type && view.type.includes('text')"
-                      >{{ $t('chart.drag_block_label_value') }}</span>
-                      <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
-                      <span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
-                      <span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
-                      <span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
-                      <span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_size') }}</span>
-                      /
-                      <span>{{ $t('chart.quota') }}</span>
-                    </span>
-                    <draggable
-                      v-model="view.yaxis"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="drag-block-style"
-                      @add="addYaxis"
-                      @update="calcData(true)"
+                      <span style="width: 80px;text-align: right;">
+                        <span>{{ $t('chart.table_pivot_row') }}</span>
+                        /
+                        <span>{{ $t('chart.dimension') }}</span>
+                      </span>
+                      <draggable
+                        v-model="view.xaxisExt"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addXaxisExt"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <dimension-ext-item
+                            v-for="(item,index) in view.xaxisExt"
+                            :key="item.id"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            @onDimensionItemChange="dimensionItemChange"
+                            @onDimensionItemRemove="dimensionItemRemove"
+                            @editItemFilter="showDimensionEditFilter"
+                            @onNameEdit="showRename"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
+                    <!--xAxis-->
+                    <el-row
+                      v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
+                      class="padding-lr"
                     >
-                      <transition-group class="draggable-group">
-                        <quota-item
-                          v-for="(item,index) in view.yaxis"
-                          :key="item.id"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          :chart="chart"
-                          @onQuotaItemChange="quotaItemChange"
-                          @onQuotaItemRemove="quotaItemRemove"
-                          @editItemFilter="showQuotaEditFilter"
-                          @onNameEdit="showRename"
-                          @editItemCompare="showQuotaEditCompare"
-                        />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
-                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-                    </div>
-                  </el-row>
-                  <!--yAxisExt-->
-                  <el-row v-if="view.type && view.type === 'chart-mix'" class="padding-lr" style="margin-top: 6px;">
-                    <span style="width: 80px;text-align: right;">
-                      <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
-                      /
-                      <span>{{ $t('chart.quota') }}</span>
-                    </span>
-                    <draggable
-                      v-model="view.yaxisExt"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="drag-block-style"
-                      @add="addYaxisExt"
-                      @update="calcData(true)"
+                      <span style="width: 80px;text-align: right;">
+                        <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                        <span
+                          v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
+                        >{{ $t('chart.drag_block_type_axis') }}</span>
+                        <span
+                          v-else-if="view.type && view.type.includes('pie')"
+                        >{{ $t('chart.drag_block_pie_label') }}</span>
+                        <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
+                        <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
+                        <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
+                        <span v-else-if="view.type && view.type.includes('treemap')">{{ $t('chart.drag_block_treemap_label') }}</span>
+                        <span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
+                        /
+                        <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
+                        <span
+                          v-else-if="view.type && view.type === 'table-info'"
+                        >{{ $t('chart.dimension_or_quota') }}</span>
+                      </span>
+                      <draggable
+                        v-model="view.xaxis"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addXaxis"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <dimension-item
+                            v-for="(item,index) in view.xaxis"
+                            :key="item.id"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            @onDimensionItemChange="dimensionItemChange"
+                            @onDimensionItemRemove="dimensionItemRemove"
+                            @editItemFilter="showDimensionEditFilter"
+                            @onNameEdit="showRename"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
+                    <!--yaxis-->
+                    <el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
+                      <span style="width: 80px;text-align: right;">
+                        <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                        <span
+                          v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall')"
+                        >{{ $t('chart.drag_block_value_axis') }}</span>
+                        <span
+                          v-else-if="view.type && view.type.includes('pie')"
+                        >{{ $t('chart.drag_block_pie_angel') }}</span>
+                        <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
+                        <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
+                        <span v-else-if="view.type && view.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
+                        <span
+                          v-else-if="view.type && view.type.includes('text')"
+                        >{{ $t('chart.drag_block_label_value') }}</span>
+                        <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
+                        <span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
+                        <span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
+                        <span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
+                        <span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_size') }}</span>
+                        /
+                        <span>{{ $t('chart.quota') }}</span>
+                      </span>
+                      <draggable
+                        v-model="view.yaxis"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addYaxis"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <quota-item
+                            v-for="(item,index) in view.yaxis"
+                            :key="item.id"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            :chart="chart"
+                            @onQuotaItemChange="quotaItemChange"
+                            @onQuotaItemRemove="quotaItemRemove"
+                            @editItemFilter="showQuotaEditFilter"
+                            @onNameEdit="showRename"
+                            @editItemCompare="showQuotaEditCompare"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
+                    <!--yAxisExt-->
+                    <el-row v-if="view.type && view.type === 'chart-mix'" class="padding-lr" style="margin-top: 6px;">
+                      <span style="width: 80px;text-align: right;">
+                        <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
+                        /
+                        <span>{{ $t('chart.quota') }}</span>
+                      </span>
+                      <draggable
+                        v-model="view.yaxisExt"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addYaxisExt"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <quota-ext-item
+                            v-for="(item,index) in view.yaxisExt"
+                            :key="item.id"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            :chart="chart"
+                            @onQuotaItemChange="quotaItemChange"
+                            @onQuotaItemRemove="quotaItemRemove"
+                            @editItemFilter="showQuotaEditFilter"
+                            @onNameEdit="showRename"
+                            @editItemCompare="showQuotaEditCompare"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
+                    <!--extStack-->
+                    <el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
+                      <span style="width: 80px;text-align: right;">
+                        <span>{{ $t('chart.stack_item') }}</span>
+                        /
+                        <span>{{ $t('chart.dimension') }}</span>
+                      </span>
+                      <draggable
+                        v-model="view.extStack"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addStack"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <chart-drag-item
+                            v-for="(item,index) in view.extStack"
+                            :key="item.id"
+                            :conf="'sort'"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            @onItemChange="stackItemChange"
+                            @onItemRemove="stackItemRemove"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
+                    <!--extBubble-->
+                    <el-row v-if="view.type && view.type.includes('scatter')" class="padding-lr" style="margin-top: 6px;">
+                      <span style="width: 80px;text-align: right;">
+                        <span>{{ $t('chart.bubble_size') }}</span>
+                        /
+                        <span>{{ $t('chart.quota') }}</span>
+                        <el-tooltip class="item" effect="dark" placement="bottom">
+                          <div slot="content">
+                            该指标生效时，样式大小中的气泡大小属性将失效
+                          </div>
+                          <i class="el-icon-info" style="cursor: pointer;color: #606266;" />
+                        </el-tooltip>
+                      </span>
+                      <draggable
+                        v-model="view.extBubble"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addBubble"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <chart-drag-item
+                            v-for="(item,index) in view.extBubble"
+                            :key="item.id"
+                            :conf="'summary'"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            @onItemChange="bubbleItemChange"
+                            @onItemRemove="bubbleItemRemove"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.extBubble || view.extBubble.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" style="margin-top: 6px;">
+                      <span>{{ $t('chart.result_filter') }}</span>
+                      <!--                    <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
+                      <!--                      {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+                      <!--                    </el-button>-->
+                      <draggable
+                        v-model="view.customFilter"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="theme-item-class"
+                        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                        @add="addCustomFilter"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <filter-item
+                            v-for="(item,index) in view.customFilter"
+                            :key="item.id"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            @onFilterItemRemove="filterItemRemove"
+                            @editItemFilter="showEditFilter"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
+                    <el-row
+                      v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot'"
+                      class="padding-lr"
+                      style="margin-top: 6px;"
                     >
-                      <transition-group class="draggable-group">
-                        <quota-ext-item
-                          v-for="(item,index) in view.yaxisExt"
-                          :key="item.id"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          :chart="chart"
-                          @onQuotaItemChange="quotaItemChange"
-                          @onQuotaItemRemove="quotaItemRemove"
-                          @editItemFilter="showQuotaEditFilter"
-                          @onNameEdit="showRename"
-                          @editItemCompare="showQuotaEditCompare"
-                        />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
-                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-                    </div>
-                  </el-row>
-                  <!--extStack-->
-                  <el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
-                    <span style="width: 80px;text-align: right;">
-                      <span>{{ $t('chart.stack_item') }}</span>
-                      /
-                      <span>{{ $t('chart.dimension') }}</span>
-                    </span>
-                    <draggable
-                      v-model="view.extStack"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="drag-block-style"
-                      @add="addStack"
-                      @update="calcData(true)"
-                    >
-                      <transition-group class="draggable-group">
-                        <chart-drag-item
-                          v-for="(item,index) in view.extStack"
-                          :key="item.id"
-                          :conf="'sort'"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          @onItemChange="stackItemChange"
-                          @onItemRemove="stackItemRemove"
-                        />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
-                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-                    </div>
-                  </el-row>
-                  <!--extBubble-->
-                  <el-row v-if="view.type && view.type.includes('scatter')" class="padding-lr" style="margin-top: 6px;">
-                    <span style="width: 80px;text-align: right;">
-                      <span>{{ $t('chart.bubble_size') }}</span>
-                      /
-                      <span>{{ $t('chart.quota') }}</span>
-                      <el-tooltip class="item" effect="dark" placement="bottom">
-                        <div slot="content">
-                          该指标生效时，样式大小中的气泡大小属性将失效
-                        </div>
-                        <i class="el-icon-info" style="cursor: pointer;color: #606266;" />
-                      </el-tooltip>
-                    </span>
-                    <draggable
-                      v-model="view.extBubble"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="drag-block-style"
-                      @add="addBubble"
-                      @update="calcData(true)"
-                    >
-                      <transition-group class="draggable-group">
-                        <chart-drag-item
-                          v-for="(item,index) in view.extBubble"
-                          :key="item.id"
-                          :conf="'summary'"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          @onItemChange="bubbleItemChange"
-                          @onItemRemove="bubbleItemRemove"
-                        />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.extBubble || view.extBubble.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" style="margin-top: 6px;">
-                    <span>{{ $t('chart.result_filter') }}</span>
-                    <!--                    <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
-                    <!--                      {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
-                    <!--                    </el-button>-->
-                    <draggable
-                      v-model="view.customFilter"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="theme-item-class"
-                      style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                      @add="addCustomFilter"
-                      @update="calcData(true)"
-                    >
-                      <transition-group class="draggable-group">
-                        <filter-item
-                          v-for="(item,index) in view.customFilter"
-                          :key="item.id"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          @onFilterItemRemove="filterItemRemove"
-                          @editItemFilter="showEditFilter"
-                        />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
-                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-                    </div>
-                  </el-row>
-                  <el-row
-                    v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot'"
-                    class="padding-lr"
-                    style="margin-top: 6px;"
-                  >
-                    <span style="width: 80px;text-align: right;">
-                      <span>{{ $t('chart.drill') }}</span>
-                      /
-                      <span>{{ $t('chart.dimension') }}</span>
-                    </span>
-                    <draggable
-                      v-model="view.drillFields"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      group="drag"
-                      animation="300"
-                      :move="onMove"
-                      class="drag-block-style"
-                      @add="addDrill"
-                      @update="calcData(true)"
-                    >
-                      <transition-group class="draggable-group">
-                        <drill-item
-                          v-for="(item,index) in view.drillFields"
-                          :key="item.id"
-                          :param="param"
-                          :index="index"
-                          :item="item"
-                          @onDimensionItemChange="drillItemChange"
-                          @onDimensionItemRemove="drillItemRemove"
-                        />
-                      </transition-group>
-                    </draggable>
-                    <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
-                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-                    </div>
-                  </el-row>
+                      <span style="width: 80px;text-align: right;">
+                        <span>{{ $t('chart.drill') }}</span>
+                        /
+                        <span>{{ $t('chart.dimension') }}</span>
+                      </span>
+                      <draggable
+                        v-model="view.drillFields"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addDrill"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <drill-item
+                            v-for="(item,index) in view.drillFields"
+                            :key="item.id"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            @onDimensionItemChange="drillItemChange"
+                            @onDimensionItemRemove="drillItemRemove"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
+                  </div>
+
                 </el-row>
               </div>
             </el-col>
@@ -796,8 +800,14 @@
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
+            <plugin-com
+              v-if="httpRequest.status && chart.type && isPlugin"
+              :component-name="chart.type + '-view'"
+              :obj="{chart}"
+              class="chart-class"
+            />
             <chart-component
-              v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'"
+              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'"
               ref="dynamicChart"
               :chart-id="chart.id"
               :chart="chart"
@@ -805,7 +815,7 @@
               @onChartClick="chartClick"
             />
             <chart-component-g2
-              v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
               ref="dynamicChart"
               :chart-id="chart.id"
               :chart="chart"
@@ -813,7 +823,7 @@
               @onChartClick="chartClick"
             />
             <chart-component-s2
-              v-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
               ref="dynamicChart"
               :chart-id="chart.id"
               :chart="chart"
@@ -821,13 +831,13 @@
               @onChartClick="chartClick"
             />
             <table-normal
-              v-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts' && chart.type !== 'table-pivot'"
+              v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts' && chart.type !== 'table-pivot'"
               :show-summary="chart.type === 'table-normal'"
               :chart="chart"
               class="table-class"
             />
             <label-normal
-              v-if="httpRequest.status && chart.type && chart.type.includes('text')"
+              v-else-if="httpRequest.status && chart.type && chart.type.includes('text')"
               :chart="chart"
               class="table-class"
             />
@@ -966,7 +976,6 @@
 
 <script>
 import { ajaxGetDataOnly, post } from '@/api/chart/chart'
-import draggable from 'vuedraggable'
 import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
 import FilterItem from '../components/drag-item/FilterItem'
@@ -1026,7 +1035,8 @@ import CompareEdit from '@/views/chart/components/compare/CompareEdit'
 import { compareItem } from '@/views/chart/chart/compare'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
-
+import PluginCom from '@/views/system/plugin/PluginCom'
+import { pluginTypes } from '@/api/chart/chart'
 export default {
   name: 'ChartEdit',
   components: {
@@ -1068,10 +1078,10 @@ export default {
     ChartComponent,
     QuotaItem,
     DimensionItem,
-    draggable,
     ChartDragItem,
     DrillItem,
-    DrillPath
+    DrillPath,
+    PluginCom
   },
   props: {
     param: {
@@ -1161,7 +1171,9 @@ export default {
       drill: false,
       hasEdit: false,
       quotaItemCompare: {},
-      showEditQuotaCompare: false
+      showEditQuotaCompare: false,
+      plugins: [],
+      isPlugin: false
     }
   },
   computed: {
@@ -1182,6 +1194,7 @@ export default {
       this.fieldFilter(val)
     },
     'chartType': function(newVal, oldVal) {
+      this.isPlugin = this.plugins.some(plugin => plugin.value === this.chart.type)
       if (newVal === 'map' && newVal !== oldVal) {
         this.initAreas()
       }
@@ -1193,13 +1206,27 @@ export default {
     // this.initAreas()
   },
   mounted() {
+    this.bindPluginEvent()
     // this.get(this.$store.state.chart.viewId);
     this.getData(this.param.id)
     // this.myEcharts();
   },
   activated() {
   },
+  beforeCreate() {
+    pluginTypes().then(res => {
+      this.plugins = res.data
+      this.isPlugin = this.plugins.some(plugin => plugin.value === this.chart.type)
+    })
+  },
   methods: {
+    bindPluginEvent() {
+      bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)
+      bus.$on('show-rename', this.showRename)
+      bus.$on('show-quota-edit-filter', this.showQuotaEditFilter)
+      bus.$on('show-quota-edit-compare', this.showQuotaEditCompare)
+      bus.$on('calc-data', this.calcData)
+    },
     initTableData(id) {
       if (id != null) {
         post('/dataset/table/getWithPermission/' + id, null).then(response => {
diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue
index e11c5ced17..b52e190f6b 100644
--- a/frontend/src/views/chart/view/ChartType.vue
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -1,439 +1,88 @@
 <template>
   <div class="chart-type">
-    <div v-if="chart.render && chart.render === 'antv'">
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_table') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="table-normal" label="table-normal" border class="radio-style">
-              <span :title="$t('chart.chart_table_normal')">
-                <svg-icon icon-class="table-normal" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_table_normal') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="table-info" label="table-info" border class="radio-style">
-              <span :title="$t('chart.chart_table_info')">
-                <svg-icon icon-class="table-info" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_table_info') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="table-pivot" label="table-pivot" border class="radio-style">
-              <span :title="$t('chart.chart_table_pivot')">
-                <svg-icon icon-class="table-pivot" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_table_pivot') }}</p>
-            </el-radio>
-          </div>
-          <!--如需要，以下用于占位-->
-          <!--<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
-        </div>
-      </div>
+    <div v-for="(renderItem, category) in renderMap[chart.render]" :key="category">
+      <el-divider class="chart-type-divider">{{ $t(category) }}</el-divider>
 
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_quota') }}</el-divider>
-      <div style="display: block;">
+      <div v-for="(container, i) in renderItem" :key="i" style="display: block;">
         <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="text" label="text" border class="radio-style">
-              <span :title="$t('chart.chart_card')">
-                <svg-icon icon-class="text" class="chart-icon" />
+          <div v-for="(item, idx) in container" :key="idx" style="position: relative;display: block;" :style="{'top': item.isPlugin ? '5px' : '0'}">
+            <el-radio v-if="item.placeholder" value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+            <plugin-com v-else-if="item.isPlugin" :component-name="item.value + '-type'" />
+            <el-radio v-else :value="item.value" :label="item.value" border class="radio-style">
+              <span :title="$t(item.title)">
+                <svg-icon :icon-class="item.icon" class="chart-icon" />
               </span>
-              <p class="radio-label">{{ $t('chart.chart_card') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="gauge" label="gauge" border class="radio-style">
-              <span :title="$t('chart.chart_gauge')">
-                <svg-icon icon-class="gauge" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_gauge') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="liquid" label="liquid" border class="radio-style">
-              <span :title="$t('chart.chart_liquid')">
-                <svg-icon icon-class="liquid" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_liquid') }}</p>
+              <p class="radio-label">{{ $t(item.title) }}</p>
             </el-radio>
           </div>
         </div>
       </div>
 
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_trend') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="line" label="line" border class="radio-style">
-              <span :title="$t('chart.chart_line')">
-                <svg-icon icon-class="line" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_line') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="line-stack" label="line-stack" border class="radio-style">
-              <span :title="$t('chart.chart_line_stack')">
-                <svg-icon icon-class="line-stack" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_line_stack') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_compare') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="bar" label="bar" border class="radio-style">
-              <span :title="$t('chart.chart_bar')">
-                <svg-icon icon-class="bar" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack" label="bar-stack" border class="radio-style">
-              <span :title="$t('chart.chart_bar_stack')">
-                <svg-icon icon-class="bar-stack" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar_stack') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="waterfall" label="waterfall" border class="radio-style">
-              <span :title="$t('chart.chart_waterfall')">
-                <svg-icon icon-class="waterfall" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_waterfall') }}</p>
-            </el-radio>
-          </div>
-        </div>
-      </div>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
-              <span :title="$t('chart.chart_bar_horizontal')">
-                <svg-icon icon-class="bar-horizontal" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar_horizontal') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
-              <span :title="$t('chart.chart_bar_stack_horizontal')">
-                <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar_stack_horizontal') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_distribute') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="pie" label="pie" border class="radio-style">
-              <span :title="$t('chart.chart_pie')">
-                <svg-icon icon-class="pie" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_pie') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="pie-rose" label="pie-rose" border class="radio-style">
-              <span :title="$t('chart.chart_pie_rose')">
-                <svg-icon icon-class="pie-rose" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_pie_rose') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="radar" label="radar" border class="radio-style">
-              <span :title="$t('chart.chart_radar')">
-                <svg-icon icon-class="radar" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_radar') }}</p>
-            </el-radio>
-          </div>
-        </div>
-      </div>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="treemap" label="treemap" border class="radio-style">
-              <span :title="$t('chart.chart_treemap')">
-                <svg-icon icon-class="treemap" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_treemap') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="word-cloud" label="word-cloud" border class="radio-style">
-              <span :title="$t('chart.chart_word_cloud')">
-                <svg-icon icon-class="word-cloud" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_word_cloud') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_relation') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="scatter" label="scatter" border class="radio-style">
-              <span :title="$t('chart.chart_scatter')">
-                <svg-icon icon-class="scatter" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_scatter') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="funnel" label="funnel" border class="radio-style">
-              <span :title="$t('chart.chart_funnel')">
-                <svg-icon icon-class="funnel" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_funnel') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
     </div>
-    <div v-else-if="chart.render && chart.render === 'echarts'">
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_table') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="table-normal" label="table-normal" border class="radio-style">
-              <span :title="$t('chart.chart_table_normal')">
-                <svg-icon icon-class="table-normal" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_table_normal') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="table-info" label="table-info" border class="radio-style">
-              <span :title="$t('chart.chart_table_info')">
-                <svg-icon icon-class="table-info" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_table_info') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_quota') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="text" label="text" border class="radio-style">
-              <span :title="$t('chart.chart_card')">
-                <svg-icon icon-class="text" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_card') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="gauge" label="gauge" border class="radio-style">
-              <span :title="$t('chart.chart_gauge')">
-                <svg-icon icon-class="gauge" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_gauge') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_trend') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="line" label="line" border class="radio-style">
-              <span :title="$t('chart.chart_line')">
-                <svg-icon icon-class="line" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_line') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="line-stack" label="line-stack" border class="radio-style">
-              <span :title="$t('chart.chart_line_stack')">
-                <svg-icon icon-class="line-stack" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_line_stack') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="chart-mix" label="chart-mix" border class="radio-style">
-              <span :title="$t('chart.chart_mix')">
-                <svg-icon icon-class="chart-mix" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_mix') }}</p>
-            </el-radio>
-          </div>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_compare') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="bar" label="bar" border class="radio-style">
-              <span :title="$t('chart.chart_bar')">
-                <svg-icon icon-class="bar" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack" label="bar-stack" border class="radio-style">
-              <span :title="$t('chart.chart_bar_stack')">
-                <svg-icon icon-class="bar-stack" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar_stack') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
-              <span :title="$t('chart.chart_bar_horizontal')">
-                <svg-icon icon-class="bar-horizontal" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar_horizontal') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
-              <span :title="$t('chart.chart_bar_stack_horizontal')">
-                <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_bar_stack_horizontal') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_distribute') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="pie" label="pie" border class="radio-style">
-              <span :title="$t('chart.chart_pie')">
-                <svg-icon icon-class="pie" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_pie') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="pie-rose" label="pie-rose" border class="radio-style">
-              <span :title="$t('chart.chart_pie_rose')">
-                <svg-icon icon-class="pie-rose" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_pie_rose') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="radar" label="radar" border class="radio-style">
-              <span :title="$t('chart.chart_radar')">
-                <svg-icon icon-class="radar" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_radar') }}</p>
-            </el-radio>
-          </div>
-        </div>
-      </div>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="treemap" label="treemap" border class="radio-style">
-              <span :title="$t('chart.chart_treemap')">
-                <svg-icon icon-class="treemap" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_treemap') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_relation') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="scatter" label="scatter" border class="radio-style">
-              <span :title="$t('chart.chart_scatter')">
-                <svg-icon icon-class="scatter" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_scatter') }}</p>
-            </el-radio>
-          </div>
-          <div style="position: relative;display: block;">
-            <el-radio value="funnel" label="funnel" border class="radio-style">
-              <span :title="$t('chart.chart_funnel')">
-                <svg-icon icon-class="funnel" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_funnel') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-
-      <el-divider class="chart-type-divider">{{ $t('chart.chart_type_space') }}</el-divider>
-      <div style="display: block;">
-        <div class="radio-row">
-          <div style="position: relative;display: block;">
-            <el-radio value="map" label="map" border class="radio-style">
-              <span :title="$t('chart.chart_map')">
-                <svg-icon icon-class="map" class="chart-icon" />
-              </span>
-              <p class="radio-label">{{ $t('chart.chart_map') }}</p>
-            </el-radio>
-          </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-        </div>
-      </div>
-    </div>
-    <!--占位行-->
-  <!--                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">-->
-  <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
-  <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
-  <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
-  <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
-  <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
-  <!--                      </div>-->
   </div>
 </template>
 
 <script>
+import { TYPE_CONFIGS } from '@/views/chart/chart/util'
+import { pluginTypes } from '@/api/chart/chart'
+import PluginCom from '@/views/system/plugin/PluginCom'
 export default {
   name: 'ChartType',
+  components: { PluginCom },
   props: {
     chart: {
       type: Object,
       required: true
     }
+  },
+  data() {
+    return {
+      defaultTypes: TYPE_CONFIGS,
+      allTypes: [],
+      renderMap: {}
+    }
+  },
+  beforeCreate() {
+    pluginTypes().then(res => {
+      const plugins = res.data
+      plugins.forEach(plugin => {
+        plugin.isPlugin = true
+      })
+      this.pluginTypes = [...this.defaultTypes, ...plugins]
+      this.formatTypes()
+    })
+  },
+  methods: {
+    formatTypes() {
+      this.pluginTypes.forEach(item => {
+        const { render, category } = item
+        this.renderMap[render] = this.renderMap[render] || {}
+        const renderItem = this.renderMap[render]
+        renderItem[category] = renderItem[category] || []
+
+        const len = renderItem[category].length
+        if (len === 0 || renderItem[category][len - 1].length === 3) {
+          renderItem[category][len] = []
+          renderItem[category][len].push(item)
+        } else {
+          renderItem[category][len - 1].push(item)
+        }
+      })
+
+      // 填充占位符
+
+      Object.keys(this.renderMap).forEach(key => {
+        Object.keys(this.renderMap[key]).forEach(category => {
+          this.renderMap[key][category].forEach(container => {
+            const len = container.length
+            let reduc = 3 - len
+            while (reduc--) {
+              container.push({ placeholder: true })
+            }
+          })
+        })
+      })
+    }
   }
 }
 </script>
diff --git a/frontend/src/views/system/plugin/PluginCom.vue b/frontend/src/views/system/plugin/PluginCom.vue
index 7a7767b33b..fc555d3ccc 100644
--- a/frontend/src/views/system/plugin/PluginCom.vue
+++ b/frontend/src/views/system/plugin/PluginCom.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
-    <async-component v-if="showAsync" :url="url" :obj="obj" @execute-axios="executeAxios"
-                     @on-add-languanges="addLanguages" @plugin-call-back="pluginCallBack"/>
+    <async-component
+      v-if="showAsync"
+      :url="url"
+      :obj="obj"
+      @execute-axios="executeAxios"
+      @on-add-languanges="addLanguages"
+      @plugin-call-back="pluginCallBack"
+    />
     <div v-else>
       <h1>未知组件无法展示</h1>
     </div>
@@ -12,7 +18,7 @@
 import AsyncComponent from '@/components/AsyncComponent'
 import i18n from '@/lang'
 import bus from '@/utils/bus'
-import {execute} from '@/api/system/dynamic'
+import { execute } from '@/api/system/dynamic'
 
 export default {
   name: 'PluginCom',
@@ -67,7 +73,7 @@ export default {
     },
 
     pluginCallBack(param) {
-      const {eventName, eventParam} = param
+      const { eventName, eventParam } = param
       bus.$emit(eventName, eventParam)
     }
   }