diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 406d7f9ac2..b2bda6876f 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -957,7 +957,19 @@ export default {
     chart_word_cloud: 'Word Cloud',
     drag_block_word_cloud_label: 'Word Label',
     drag_block_word_cloud_size: 'Word Size',
-    splitCount_less_100: 'Split Count Range 0-100'
+    splitCount_less_100: 'Split Count Range 0-100',
+    change_chart_type: 'Change Type',
+    chart_type_table: 'Table',
+    chart_type_quota: 'Quota',
+    chart_type_trend: 'Trend',
+    chart_type_compare: 'Compare',
+    chart_type_distribute: 'Distribute',
+    chart_type_relation: 'Relation',
+    chart_type_space: 'Space',
+    preview: 'Preview',
+    next: 'Next',
+    select_dataset: 'Select Dataset',
+    select_chart_type: 'Select Chart Type'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 6a4c6f15f6..b09d94b92f 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -958,7 +958,19 @@ export default {
     chart_word_cloud: '詞雲',
     drag_block_word_cloud_label: '詞標簽',
     drag_block_word_cloud_size: '詞大小',
-    splitCount_less_100: '刻度數範圍0-100'
+    splitCount_less_100: '刻度數範圍0-100',
+    change_chart_type: '更改類型',
+    chart_type_table: '表格',
+    chart_type_quota: '指標',
+    chart_type_trend: '趨勢',
+    chart_type_compare: '比較',
+    chart_type_distribute: '分布',
+    chart_type_relation: '關系',
+    chart_type_space: '空間位置',
+    preview: '上一步',
+    next: '下一步',
+    select_dataset: '選擇數據集',
+    select_chart_type: '選擇圖表類型'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 852a800810..684515a3b6 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -961,7 +961,19 @@ export default {
     chart_word_cloud: '词云',
     drag_block_word_cloud_label: '词标签',
     drag_block_word_cloud_size: '词大小',
-    splitCount_less_100: '刻度数范围0-100'
+    splitCount_less_100: '刻度数范围0-100',
+    change_chart_type: '更改类型',
+    chart_type_table: '表格',
+    chart_type_quota: '指标',
+    chart_type_trend: '趋势',
+    chart_type_compare: '比较',
+    chart_type_distribute: '分布',
+    chart_type_relation: '关系',
+    chart_type_space: '空间位置',
+    preview: '上一步',
+    next: '下一步',
+    select_dataset: '选择数据集',
+    select_chart_type: '选择图表类型'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 6a8645ba27..302ecef8e8 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -137,112 +137,6 @@
       </el-dialog>
     </el-col>
 
-    <!--scene-->
-    <!--    <el-col v-if="sceneMode">-->
-    <!--      <el-row class="title-css scene-title">-->
-    <!--        <span class="title-text scene-title-name" :title="currGroup.name">-->
-    <!--          {{ currGroup.name }}-->
-    <!--        </span>-->
-    <!--        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
-    <!--          &lt;!&ndash;          {{ $t('chart.back') }}&ndash;&gt;-->
-    <!--        </el-button>-->
-    <!--      </el-row>-->
-    <!--      <el-divider />-->
-    <!--      <el-row>-->
-    <!--        <el-button type="primary" size="mini" plain @click="selectTable">-->
-    <!--          {{ $t('chart.add_chart') }}-->
-    <!--        </el-button>-->
-    <!--      </el-row>-->
-    <!--      <el-row>-->
-    <!--        <el-form>-->
-    <!--          <el-form-item class="form-item">-->
-    <!--            <el-input-->
-    <!--              v-model="search"-->
-    <!--              size="mini"-->
-    <!--              :placeholder="$t('chart.search')"-->
-    <!--              prefix-icon="el-icon-search"-->
-    <!--              clearable-->
-    <!--            />-->
-    <!--          </el-form-item>-->
-    <!--        </el-form>-->
-    <!--      </el-row>-->
-    <!--      <span v-show="false">{{ sceneData }}</span>-->
-    <!--      <el-tree-->
-    <!--        :data="chartData"-->
-    <!--        node-key="id"-->
-    <!--        :expand-on-click-node="true"-->
-    <!--        class="tree-list"-->
-    <!--        highlight-current-->
-    <!--        @node-click="sceneClick"-->
-    <!--      >-->
-    <!--        <span slot-scope="{ node, data }" class="custom-tree-node-list father">-->
-    <!--          <span style="display: flex;flex: 1;width: 0;">-->
-    <!--            <span><svg-icon :icon-class="data.type" /></span>-->
-    <!--            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
-    <!--          </span>-->
-    <!--          <span v-if="hasDataPermission('manage',data.privileges)" class="child">-->
-    <!--            <span style="margin-left: 12px;" @click.stop>-->
-    <!--              <el-dropdown trigger="click" size="small" @command="clickMore">-->
-    <!--                <span class="el-dropdown-link">-->
-    <!--                  <el-button-->
-    <!--                    icon="el-icon-more"-->
-    <!--                    type="text"-->
-    <!--                    size="small"-->
-    <!--                  />-->
-    <!--                </span>-->
-    <!--                <el-dropdown-menu slot="dropdown">-->
-    <!--                  &lt;!&ndash;                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">&ndash;&gt;-->
-    <!--                  &lt;!&ndash;                    {{ $t('chart.rename') }}&ndash;&gt;-->
-    <!--                  &lt;!&ndash;                  </el-dropdown-item>&ndash;&gt;-->
-    <!--                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">-->
-    <!--                    {{ $t('chart.delete') }}-->
-    <!--                  </el-dropdown-item>-->
-    <!--                </el-dropdown-menu>-->
-    <!--              </el-dropdown>-->
-    <!--            </span>-->
-    <!--          </span>-->
-    <!--        </span>-->
-    <!--      </el-tree>-->
-
-    <!--      &lt;!&ndash;rename chart&ndash;&gt;-->
-    <!--      <el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">-->
-    <!--        <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">-->
-    <!--          <el-form-item :label="$t('commons.name')" prop="name">-->
-    <!--            <el-input v-model="tableForm.name" />-->
-    <!--          </el-form-item>-->
-    <!--        </el-form>-->
-    <!--        <div slot="footer" class="dialog-footer">-->
-    <!--          <el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>-->
-    <!--          <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>-->
-    <!--        </div>-->
-    <!--      </el-dialog>-->
-
-    <!--      &lt;!&ndash;添加视图-选择数据集&ndash;&gt;-->
-    <!--      &lt;!&ndash;      <el-dialog&ndash;&gt;-->
-    <!--      &lt;!&ndash;        v-dialogDrag&ndash;&gt;-->
-    <!--      &lt;!&ndash;        :title="$t('chart.add_chart')"&ndash;&gt;-->
-    <!--      &lt;!&ndash;        :visible="selectTableFlag"&ndash;&gt;-->
-    <!--      &lt;!&ndash;        :show-close="false"&ndash;&gt;-->
-    <!--      &lt;!&ndash;        width="70%"&ndash;&gt;-->
-    <!--      &lt;!&ndash;        class="dialog-css"&ndash;&gt;-->
-    <!--      &lt;!&ndash;        :destroy-on-close="true"&ndash;&gt;-->
-    <!--      &lt;!&ndash;      >&ndash;&gt;-->
-    <!--      &lt;!&ndash;        <el-row style="width: 400px;">&ndash;&gt;-->
-    <!--      &lt;!&ndash;          <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">&ndash;&gt;-->
-    <!--      &lt;!&ndash;            <el-form-item :label="$t('chart.view_name')">&ndash;&gt;-->
-    <!--      &lt;!&ndash;              <el-input v-model="chartName" size="mini" />&ndash;&gt;-->
-    <!--      &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
-    <!--      &lt;!&ndash;          </el-form>&ndash;&gt;-->
-    <!--      &lt;!&ndash;        </el-row>&ndash;&gt;-->
-    <!--      &lt;!&ndash;        <table-selector @getTable="getTable" />&ndash;&gt;-->
-    <!--      &lt;!&ndash;        <div slot="footer" class="dialog-footer">&ndash;&gt;-->
-    <!--      &lt;!&ndash;          <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>&ndash;&gt;-->
-    <!--      &lt;!&ndash;          <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>&ndash;&gt;-->
-    <!--      &lt;!&ndash;        </div>&ndash;&gt;-->
-    <!--      &lt;!&ndash;      </el-dialog>&ndash;&gt;-->
-
-    <!--    </el-col>-->
-
     <!--rename chart-->
     <el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
       <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keypress.enter.native="saveTable(tableForm)">
@@ -263,7 +157,7 @@
       :title="$t('chart.add_chart')"
       :visible="selectTableFlag"
       :show-close="false"
-      width="70%"
+      width="1000px"
       class="dialog-css"
     >
       <el-row style="width: 800px;">
@@ -285,10 +179,49 @@
           </el-col>
         </el-form>
       </el-row>
-      <table-selector @getTable="getTable" />
+
+      <el-steps :active="createActive" align-center>
+        <el-step :title="$t('chart.select_dataset')" />
+        <el-step :title="$t('chart.select_chart_type')" />
+      </el-steps>
+
+      <table-selector v-show="createActive === 1" @getTable="getTable" />
+      <el-row v-show="createActive === 2" style="padding: 0 20px;">
+        <el-row class="chart-box">
+          <span>
+            <span class="theme-border-class" style="font-size: 12px">{{ $t('chart.chart_type') }}</span>
+            <span style="float: right;">
+              <el-select v-model="view.render" class="render-select" style="width: 70px" size="mini">
+                <el-option
+                  v-for="item in renderOptions"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.name"
+                />
+              </el-select>
+            </span>
+          </span>
+          <el-row>
+            <div>
+              <el-radio-group
+                v-model="view.type"
+                style="width: 100%"
+              >
+                <chart-type :chart="view" style="height: 350px;" />
+              </el-radio-group>
+            </div>
+          </el-row>
+        </el-row>
+        <el-row class="chart-box" style="text-align: center;">
+          <svg-icon :icon-class="view.type" class="chart-icon" />
+        </el-row>
+      </el-row>
+
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" :disabled="!table.id || !currGroup.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
+        <el-button v-if="createActive === 2" type="primary" size="mini" @click="createPreview">{{ $t('chart.preview') }}</el-button>
+        <el-button v-if="createActive === 1" type="primary" size="mini" :disabled="!table.id || !currGroup.id" @click="createNext">{{ $t('chart.next') }}</el-button>
+        <el-button v-if="createActive === 2" type="primary" size="mini" :disabled="!table.id || !currGroup.id || !view.type" @click="createChart">{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -319,6 +252,7 @@ import { post, chartGroupTree } from '@/api/chart/chart'
 import TableSelector from '../view/TableSelector'
 import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
 import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
+import ChartType from '@/views/chart/view/ChartType'
 import {
   DEFAULT_COLOR_CASE,
   DEFAULT_LABEL,
@@ -335,7 +269,7 @@ import {
 
 export default {
   name: 'Group',
-  components: { TableSelector, GroupMoveSelector, ChartMoveSelector },
+  components: { ChartType, TableSelector, GroupMoveSelector, ChartMoveSelector },
   props: {
     saveStatus: {
       type: Object,
@@ -416,7 +350,16 @@ export default {
       dsMoveConfirmDisabled: true,
       moveDialogTitle: '',
       isTreeSearch: false,
-      chartGroupTreeAvailable: []
+      chartGroupTreeAvailable: [],
+      createActive: 1,
+      view: {
+        render: 'antv',
+        type: 'table-normal'
+      },
+      renderOptions: [
+        { name: 'AntV', value: 'antv' },
+        { name: 'ECharts', value: 'echarts' }
+      ]
     }
   },
   computed: {
@@ -702,8 +645,13 @@ export default {
     },
 
     closeCreateChart() {
+      this.createActive = 1
       this.selectTableFlag = false
       this.table = {}
+      this.view = {
+        render: 'antv',
+        type: 'table-normal'
+      }
     },
 
     createChart() {
@@ -728,8 +676,8 @@ export default {
       view.title = this.chartName
       view.sceneId = this.currGroup.id
       view.tableId = this.table.id
-      view.type = 'bar'
-      view.render = 'antv'
+      view.type = this.view.type
+      view.render = this.view.render
       view.resultMode = 'custom'
       view.resultCount = 1000
       view.customAttr = JSON.stringify({
@@ -977,6 +925,17 @@ export default {
       if (node.children === null || node.children === 'null') {
         delete node.children
       }
+    },
+
+    createPreview() {
+      if (this.createActive > 1) {
+        this.createActive--
+      }
+    },
+    createNext() {
+      if (this.createActive < 2) {
+        this.createActive++
+      }
     }
   }
 }
@@ -1080,4 +1039,28 @@ export default {
     color:#606266;
     line-height: 28px!important;
   }
+
+  .render-select>>>.el-input__suffix{
+    width: 20px;
+  }
+  .render-select>>>.el-input__inner{
+    padding-right: 10px;
+    padding-left: 6px;
+  }
+  .dialog-css>>>.el-step__title{
+    font-weight: 400;
+    font-size: 12px;
+  }
+  .chart-icon{
+    width: 200px;
+    height: 200px;
+  }
+  .chart-box{
+    box-sizing:border-box;
+    -moz-box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+    width:50%;
+    float:left;
+    height: 380px;
+  }
 </style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 448217a4ea..9ae0236e1c 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -96,46 +96,110 @@
             <el-col
               style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
             >
-              <div style="height: 25vh;overflow:auto" class="padding-lr">
-                <span>
-                  <span class="theme-border-class">{{ $t('chart.chart_type') }}</span>
-                  <span style="float: right;">
-                    <el-select v-model="view.render" class="render-select" style="width: 70px" size="mini" @change="save(true,'chart',true,true)">
-                      <el-option
-                        v-for="item in renderOptions"
-                        :key="item.value"
-                        :value="item.value"
-                        :label="item.name"
-                      />
-                    </el-select>
-                  </span>
-                </span>
-                <el-row>
-                  <div>
-                    <el-radio-group
-                      v-model="view.type"
-                      style="width: 100%"
-                      :disabled="!hasDataPermission('manage',param.privileges)"
-                      @change="save(true,'chart',true,true)"
-                    >
-                      <chart-type :chart="view" />
-                    </el-radio-group>
-                  </div>
-                </el-row>
-                <el-row class="title-text" style="color: #909399;">
-                  <span>
-                    <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge') || chart.type.includes('treemap'))">
-                      Tips: {{ $t('chart.only_one_quota') }}
+              <div style="height: 60px;overflow:auto" class="padding-lr theme-border-class">
+                <span class="theme-border-class">
+                  <span>{{ $t('chart.chart_type') }}</span>
+                  <el-row style="padding: 4px 0 4px 10px;">
+                    <span>
+                      <svg-icon :icon-class="view.type" class="chart-icon" />
                     </span>
-                    <!--              <span v-show="chart.type && (chart.type.includes('text'))">-->
-                    <!--                Tips: {{ $t('chart.only_one_result') }}-->
-                    <!--              </span>-->
-                    <!--              <span v-show="chart.type && chart.type.includes('gauge')">-->
-                    <!--                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
-                    <!--              </span>-->
-                  </span>
-                </el-row>
+                    <span style="float: right;">
+                      <el-popover
+                        placement="bottom-end"
+                        width="400"
+                        trigger="click"
+                        :append-to-body="true"
+                      >
+                        <div class="padding-lr">
+                          <span>
+                            <span class="theme-border-class">{{ $t('chart.chart_type') }}</span>
+                            <span style="float: right;">
+                              <el-select v-model="view.render" class="render-select" style="width: 70px" size="mini" @change="save(true,'chart',true,true)">
+                                <el-option
+                                  v-for="item in renderOptions"
+                                  :key="item.value"
+                                  :value="item.value"
+                                  :label="item.name"
+                                />
+                              </el-select>
+                            </span>
+                          </span>
+                          <el-row>
+                            <div>
+                              <el-radio-group
+                                v-model="view.type"
+                                style="width: 100%"
+                                :disabled="!hasDataPermission('manage',param.privileges)"
+                                @change="save(true,'chart',true,true)"
+                              >
+                                <chart-type :chart="view" style="height: 480px" />
+                              </el-radio-group>
+                            </div>
+                          </el-row>
+                          <!--                          <el-row class="title-text" style="color: #909399;">-->
+                          <!--                            <span>-->
+                          <!--                              <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge') || chart.type.includes('treemap'))">-->
+                          <!--                                Tips: {{ $t('chart.only_one_quota') }}-->
+                          <!--                              </span>-->
+                          <!--                              &lt;!&ndash;              <span v-show="chart.type && (chart.type.includes('text'))">&ndash;&gt;-->
+                          <!--                              &lt;!&ndash;                Tips: {{ $t('chart.only_one_result') }}&ndash;&gt;-->
+                          <!--                              &lt;!&ndash;              </span>&ndash;&gt;-->
+                          <!--                              &lt;!&ndash;              <span v-show="chart.type && chart.type.includes('gauge')">&ndash;&gt;-->
+                          <!--                              &lt;!&ndash;                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}&ndash;&gt;-->
+                          <!--                              &lt;!&ndash;              </span>&ndash;&gt;-->
+                          <!--                            </span>-->
+                          <!--                          </el-row>-->
+                        </div>
+                        <el-button slot="reference" size="mini" style="padding: 6px;">
+                          {{ $t('chart.change_chart_type') }}
+                          <i class="el-icon-caret-bottom" />
+                        </el-button>
+                      </el-popover>
+                    </span>
+                  </el-row>
+                </span>
               </div>
+
+              <!--              <div style="height: 25vh;overflow:auto" class="padding-lr">-->
+              <!--                <span>-->
+              <!--                  <span class="theme-border-class">{{ $t('chart.chart_type') }}</span>-->
+              <!--                  <span style="float: right;">-->
+              <!--                    <el-select v-model="view.render" class="render-select" style="width: 70px" size="mini" @change="save(true,'chart',true,true)">-->
+              <!--                      <el-option-->
+              <!--                        v-for="item in renderOptions"-->
+              <!--                        :key="item.value"-->
+              <!--                        :value="item.value"-->
+              <!--                        :label="item.name"-->
+              <!--                      />-->
+              <!--                    </el-select>-->
+              <!--                  </span>-->
+              <!--                </span>-->
+              <!--                <el-row>-->
+              <!--                  <div>-->
+              <!--                    <el-radio-group-->
+              <!--                      v-model="view.type"-->
+              <!--                      style="width: 100%"-->
+              <!--                      :disabled="!hasDataPermission('manage',param.privileges)"-->
+              <!--                      @change="save(true,'chart',true,true)"-->
+              <!--                    >-->
+              <!--                      <chart-type :chart="view" />-->
+              <!--                    </el-radio-group>-->
+              <!--                  </div>-->
+              <!--                </el-row>-->
+              <!--                <el-row class="title-text" style="color: #909399;">-->
+              <!--                  <span>-->
+              <!--                    <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge') || chart.type.includes('treemap'))">-->
+              <!--                      Tips: {{ $t('chart.only_one_quota') }}-->
+              <!--                    </span>-->
+              <!--                    &lt;!&ndash;              <span v-show="chart.type && (chart.type.includes('text'))">&ndash;&gt;-->
+              <!--                    &lt;!&ndash;                Tips: {{ $t('chart.only_one_result') }}&ndash;&gt;-->
+              <!--                    &lt;!&ndash;              </span>&ndash;&gt;-->
+              <!--                    &lt;!&ndash;              <span v-show="chart.type && chart.type.includes('gauge')">&ndash;&gt;-->
+              <!--                    &lt;!&ndash;                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}&ndash;&gt;-->
+              <!--                    &lt;!&ndash;              </span>&ndash;&gt;-->
+              <!--                  </span>-->
+              <!--                </el-row>-->
+              <!--              </div>-->
               <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style theme-border-class">
                 <el-row style="height: 100%;">
                   <el-row class="padding-lr">
@@ -1761,7 +1825,7 @@ export default {
   }
 
   .attr-style{
-    height: calc(100vh - 56px - 25vh - 40px - 40px);
+    height: calc(100vh - 56px - 60px - 40px - 40px);
   }
 
   .blackTheme .attr-style{
diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue
index 136bcb155a..c5c1541017 100644
--- a/frontend/src/views/chart/view/ChartType.vue
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -1,221 +1,409 @@
 <template>
   <div class="chart-type">
     <div v-if="chart.render && chart.render === 'antv'">
-      <div class="radio-row">
-        <el-radio value="table-normal" label="table-normal">
-          <span :title="$t('chart.chart_table_normal')">
-            <svg-icon icon-class="table-normal" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="table-info" label="table-info">
-          <span :title="$t('chart.chart_table_info')">
-            <svg-icon icon-class="table-info" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="text" label="text">
-          <span :title="$t('chart.chart_card')">
-            <svg-icon icon-class="text" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="bar" label="bar">
-          <span :title="$t('chart.chart_bar')">
-            <svg-icon icon-class="bar" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="bar-stack" label="bar-stack">
-          <span :title="$t('chart.chart_bar_stack')">
-            <svg-icon icon-class="bar-stack" class="chart-icon" />
-          </span>
-        </el-radio>
+      <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>
+              <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>
+              <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>
-      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-        <el-radio value="bar-horizontal" label="bar-horizontal">
-          <span :title="$t('chart.chart_bar_horizontal')">
-            <svg-icon icon-class="bar-horizontal" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
-          <span :title="$t('chart.chart_bar_stack_horizontal')">
-            <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="line" label="line">
-          <span :title="$t('chart.chart_line')">
-            <svg-icon icon-class="line" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="line-stack" label="line-stack">
-          <span :title="$t('chart.chart_line_stack')">
-            <svg-icon icon-class="line-stack" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="scatter" label="scatter">
-          <span :title="$t('chart.chart_scatter')">
-            <svg-icon icon-class="scatter" class="chart-icon" />
-          </span>
-        </el-radio>
+
+      <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>
+              <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>
+              <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>
+              <span :title="$t('chart.chart_liquid')">
+                <svg-icon icon-class="liquid" class="chart-icon" />
+              </span>
+              <p class="radio-label">{{ $t('chart.chart_liquid') }}</p>
+            </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="chart-mix" label="chart-mix">-->
-        <!--          <span :title="$t('chart.chart_mix')">-->
-        <!--            <svg-icon icon-class="chart-mix" class="chart-icon" />-->
-        <!--          </span>-->
-        <!--        </el-radio>-->
-        <!--        <el-radio value="map" label="map">-->
-        <!--          <span :title="$t('chart.chart_map')">-->
-        <!--            <svg-icon icon-class="map" class="chart-icon" />-->
-        <!--          </span>-->
-        <!--        </el-radio>-->
-        <el-radio value="waterfall" label="waterfall">
-          <span :title="$t('chart.chart_waterfall')">
-            <svg-icon icon-class="waterfall" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="radar" label="radar">
-          <span :title="$t('chart.chart_radar')">
-            <svg-icon icon-class="radar" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="gauge" label="gauge">
-          <span :title="$t('chart.chart_gauge')">
-            <svg-icon icon-class="gauge" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="pie" label="pie">
-          <span :title="$t('chart.chart_pie')">
-            <svg-icon icon-class="pie" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="pie-rose" label="pie-rose">
-          <span :title="$t('chart.chart_pie_rose')">
-            <svg-icon icon-class="pie-rose" class="chart-icon" />
-          </span>
-        </el-radio>
+
+      <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>
+              <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>
+              <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>
-      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-        <el-radio value="funnel" label="funnel">
-          <span :title="$t('chart.chart_funnel')">
-            <svg-icon icon-class="funnel" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="treemap" label="treemap">
-          <span :title="$t('chart.chart_treemap')">
-            <svg-icon icon-class="treemap" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="word-cloud" label="word-cloud">
-          <span :title="$t('chart.chart_word_cloud')">
-            <svg-icon icon-class="word-cloud" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="liquid" label="liquid">
-          <span :title="$t('chart.chart_liquid')">
-            <svg-icon icon-class="liquid" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+
+      <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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'">
-      <div class="radio-row">
-        <el-radio value="table-normal" label="table-normal">
-          <span :title="$t('chart.chart_table_normal')">
-            <svg-icon icon-class="table-normal" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="table-info" label="table-info">
-          <span :title="$t('chart.chart_table_info')">
-            <svg-icon icon-class="table-info" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="text" label="text">
-          <span :title="$t('chart.chart_card')">
-            <svg-icon icon-class="text" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="bar" label="bar">
-          <span :title="$t('chart.chart_bar')">
-            <svg-icon icon-class="bar" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="bar-stack" label="bar-stack">
-          <span :title="$t('chart.chart_bar_stack')">
-            <svg-icon icon-class="bar-stack" class="chart-icon" />
-          </span>
-        </el-radio>
+      <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>
+              <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>
+              <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>
-      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-        <el-radio value="bar-horizontal" label="bar-horizontal">
-          <span :title="$t('chart.chart_bar_horizontal')">
-            <svg-icon icon-class="bar-horizontal" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
-          <span :title="$t('chart.chart_bar_stack_horizontal')">
-            <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="line" label="line">
-          <span :title="$t('chart.chart_line')">
-            <svg-icon icon-class="line" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="line-stack" label="line-stack">
-          <span :title="$t('chart.chart_line_stack')">
-            <svg-icon icon-class="line-stack" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="scatter" label="scatter">
-          <span :title="$t('chart.chart_scatter')">
-            <svg-icon icon-class="scatter" class="chart-icon" />
-          </span>
-        </el-radio>
+
+      <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>
+              <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>
+              <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>
-      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-        <el-radio value="chart-mix" label="chart-mix">
-          <span :title="$t('chart.chart_mix')">
-            <svg-icon icon-class="chart-mix" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="map" label="map">
-          <span :title="$t('chart.chart_map')">
-            <svg-icon icon-class="map" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="radar" label="radar">
-          <span :title="$t('chart.chart_radar')">
-            <svg-icon icon-class="radar" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="gauge" label="gauge">
-          <span :title="$t('chart.chart_gauge')">
-            <svg-icon icon-class="gauge" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="pie" label="pie">
-          <span :title="$t('chart.chart_pie')">
-            <svg-icon icon-class="pie" class="chart-icon" />
-          </span>
-        </el-radio>
+
+      <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>
+              <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>
+              <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>
+              <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>
-      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-        <el-radio value="pie-rose" label="pie-rose">
-          <span :title="$t('chart.chart_pie_rose')">
-            <svg-icon icon-class="pie-rose" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="funnel" label="funnel">
-          <span :title="$t('chart.chart_funnel')">
-            <svg-icon icon-class="funnel" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="treemap" label="treemap">
-          <span :title="$t('chart.chart_treemap')">
-            <svg-icon icon-class="treemap" class="chart-icon" />
-          </span>
-        </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-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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
     <!--占位行-->
@@ -243,18 +431,20 @@ export default {
 
 <style scoped lang="scss">
 .chart-type{
-  >>>div{
+  >div{
     width: 100%;
   }
   padding: 4px;
-  display: flex;
+  display: -webkit-flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  overflow-y: auto;
+  width: 100%;
 }
 
 .chart-icon{
-  width: 20px;
-  height: 20px;
+  width: 80px;
+  height: 40px;
 }
 
 .chart-type>>>.el-radio__input{
@@ -276,5 +466,38 @@ export default {
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
+  >>>.el-radio{
+    width: 80px;
+    height: 60px;
+    padding: 0;
+  }
+}
+
+.chart-type-divider{
+  width: auto;
+}
+
+.el-divider--horizontal{
+  margin: 30px 0 14px 0;
+}
+
+.el-divider__text{
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.radio-label{
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  height: 20px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: pre;
+  font-size: 12px;
 }
 </style>