diff --git a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
index 27479de489..bb7b734cce 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
@@ -124,7 +124,7 @@ public class PanelGroupService {
         if (StringUtils.isEmpty(panelId)) { // 新建
             checkPanelName(request.getName(), request.getPid(), PanelConstants.OPT_TYPE_INSERT, null, request.getNodeType());
             panelId = newPanel(request);
-            panelGroupMapper.insert(request);
+            panelGroupMapper.insertSelective(request);
             // 清理权限缓存
             clearPermissionCache();
             sysAuthService.copyAuth(panelId, SysAuthConstants.AUTH_SOURCE_TYPE_PANEL);
diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index b39e7ab82e..0c3b8a8293 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -1851,7 +1851,7 @@ export default {
 }
 
 .batchSetting{
-  opacity: 0.7;
+  opacity: 0.9;
 }
 
 .positionChange{
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index 4522f94a23..765458d7a2 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -91,7 +91,7 @@ export default {
     },
     // batch operation area
     batchOptAreaShow() {
-      return this.batchOptStatus && this.element.type === 'view'
+      return this.batchOptStatus && this.element.type === 'view' && !this.element.isPlugin
     },
     // 联动区域按钮显示
     linkageAreaShow() {
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 5e693c977d..869e38d02c 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -256,13 +256,15 @@ export default {
     })
     // 监听画布div变动事件
     const tempCanvas = document.getElementById('canvasInfoTemp')
-    erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
-      _this.$nextTick(() => {
-        // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
-        _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
-        this.$emit('mainHeightChange', _this.mainHeight)
+    if (tempCanvas) {
+      erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
+        _this.$nextTick(() => {
+          // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
+          _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
+          this.$emit('mainHeightChange', _this.mainHeight)
+        })
       })
-    })
+    }
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     _this.$store.commit('clearLinkageSettingInfo', false)
     _this.canvasStyleDataInit()
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index b27f4ad796..ebc89f8173 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -412,8 +412,11 @@ export default {
           this.chart.customAttr = this.sourceCustomAttrStr
           updateParams['customAttr'] = this.sourceCustomAttrStr
         } else if (param.custom === 'customStyle') {
-          this.sourceCustomStyleStr = this.chart.customStyle
           const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
+          // view's title use history
+          if (param.property === 'text') {
+            param.value.title = sourceCustomStyle.text.title
+          }
           sourceCustomStyle[param.property] = param.value
           this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
           this.chart.customStyle = this.sourceCustomStyleStr
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index f5a17a6d1f..98eb050ce5 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -125,7 +125,8 @@ const data = {
     changeProperties: {
       customStyle: {},
       customAttr: {}
-    }
+    },
+    allViewRender: []
   },
   mutations: {
     ...animation.mutations,
@@ -550,7 +551,7 @@ const data = {
         // get view base info
         const viewBaseInfo = state.componentViewsData[id]
         // get properties
-        const viewConfig = TYPE_CONFIGS.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
+        const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
         const viewProperties = viewConfig ? viewConfig[0].properties : []
         if (state.mixProperties.length > 0) {
           // If it exists , taking the intersection
@@ -641,6 +642,12 @@ const data = {
         customStyle: {},
         customAttr: {}
       }
+    },
+    initViewRender(state, pluginViews) {
+      pluginViews.forEach(plugin => {
+        plugin.isPlugin = true
+      })
+      state.allViewRender = [...TYPE_CONFIGS, ...pluginViews]
     }
   },
   modules: {
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 840b2addec..b3102a190f 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -8,7 +8,8 @@ export const DEFAULT_COLOR_CASE = {
   tableStripe: true,
   dimensionColor: '#000000',
   quotaColor: '#000000',
-  tableBorderColor: '#cfdaf4'
+  tableBorderColor: '#cfdaf4',
+  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index a3ae0d42f7..7afa56d139 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -6,7 +6,7 @@
           <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="titleForm.show">
-          <el-form-item :label="$t('chart.title')" class="form-item">
+          <el-form-item v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
             <el-input
               v-model="titleForm.title"
               size="mini"
@@ -51,6 +51,7 @@
 <script>
 import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
+import { mapState } from 'vuex'
 
 export default {
   name: 'TitleSelector',
@@ -79,6 +80,11 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapState([
+      'batchOptStatus'
+    ])
+  },
   mounted() {
     this.init()
     this.initData()
@@ -96,7 +102,9 @@ export default {
         if (customStyle.text) {
           this.titleForm = customStyle.text
         }
-        this.titleForm.title = this.chart.title
+        if (!this.batchOptStatus) {
+          this.titleForm.title = this.chart.title
+        }
       }
     },
     init() {
@@ -110,15 +118,17 @@ export default {
       this.fontSize = arr
     },
     changeTitleStyle() {
-      if (this.titleForm.title.length < 1) {
-        this.$error(this.$t('chart.title_cannot_empty'))
-        this.titleForm.title = this.chart.title
-        return
-      }
-      if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
-        this.$error(this.$t('chart.title_repeat'))
-        this.titleForm.title = this.chart.title
-        return
+      if (!this.batchOptStatus) {
+        if (this.titleForm.title.length < 1) {
+          this.$error(this.$t('chart.title_cannot_empty'))
+          this.titleForm.title = this.chart.title
+          return
+        }
+        if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
+          this.$error(this.$t('chart.title_repeat'))
+          this.titleForm.title = this.chart.title
+          return
+        }
       }
       if (!this.titleForm.show) {
         this.isSetting = false
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index a7cb50f3a2..6d0d320d64 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -6,7 +6,7 @@
           <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="titleForm.show">
-          <el-form-item :label="$t('chart.title')" class="form-item">
+          <el-form-item v-if="!this.batchOptStatus" :label="$t('chart.title')" class="form-item">
             <el-input
               v-model="titleForm.title"
               size="mini"
@@ -43,8 +43,8 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
-import { checkTitle } from '@/api/chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
+import { mapState } from 'vuex'
 
 export default {
   name: 'TitleSelectorAntV',
@@ -66,6 +66,11 @@ export default {
       predefineColors: COLOR_PANEL
     }
   },
+  computed: {
+    ...mapState([
+      'batchOptStatus'
+    ])
+  },
   watch: {
     'chart': {
       handler: function() {
@@ -90,7 +95,9 @@ export default {
         if (customStyle.text) {
           this.titleForm = customStyle.text
         }
-        this.titleForm.title = this.chart.title
+        if (!this.batchOptStatus) {
+          this.titleForm.title = this.chart.title
+        }
       }
     },
     init() {
@@ -104,15 +111,17 @@ export default {
       this.fontSize = arr
     },
     changeTitleStyle() {
-      if (this.titleForm.title.length < 1) {
-        this.$error(this.$t('chart.title_cannot_empty'))
-        this.titleForm.title = this.chart.title
-        return
-      }
-      if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
-        this.$error(this.$t('chart.title_repeat'))
-        this.titleForm.title = this.chart.title
-        return
+      if (!this.batchOptStatus) {
+        if (this.titleForm.title.length < 1) {
+          this.$error(this.$t('chart.title_cannot_empty'))
+          this.titleForm.title = this.chart.title
+          return
+        }
+        if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
+          this.$error(this.$t('chart.title_repeat'))
+          this.titleForm.title = this.chart.title
+          return
+        }
       }
       this.$emit('onTextChange', this.titleForm)
     },
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 0df0e9a70d..cd0fdd8d62 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1170,7 +1170,7 @@ export default {
     chartProperties() {
       const _this = this
       if (_this.chart && _this.chart.render) {
-        const viewConfig = TYPE_CONFIGS.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
+        const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
         if (viewConfig && viewConfig.length) {
           return viewConfig[0].properties
         } else {
@@ -1188,7 +1188,8 @@ export default {
     },
     ...mapState([
       'curComponent',
-      'panelViewEditInfo'
+      'panelViewEditInfo',
+      'allViewRender'
     ])
     /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index 81ff79bcb3..974e803a1f 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -12,7 +12,7 @@
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
       class="attr-style theme-border-class"
     >
-      <el-row v-if="chart.mode!=='batchOpt'" class="padding-lr">
+      <el-row v-if="!batchOptStatus" class="padding-lr">
         <span class="title-text">{{ $t('chart.style_priority') }}</span>
         <el-row>
           <el-radio-group
@@ -274,6 +274,7 @@ import LegendSelectorAntV from '@/views/chart/components/component-style/LegendS
 import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
 import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
 import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
+import { mapState } from 'vuex'
 
 export default {
   name: 'ChartStyle',
@@ -321,7 +322,9 @@ export default {
     }
   },
   computed: {
-
+    ...mapState([
+      'batchOptStatus'
+    ])
   },
   created() {
 
diff --git a/frontend/src/views/chart/view/ChartStyleBack.vue b/frontend/src/views/chart/view/ChartStyleBack.vue
deleted file mode 100644
index 299f67f350..0000000000
--- a/frontend/src/views/chart/view/ChartStyleBack.vue
+++ /dev/null
@@ -1,609 +0,0 @@
-<template>
-  <el-row class="view-panel">
-    <plugin-com
-      v-if="view.isPlugin"
-      style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
-      class="attr-style theme-border-class"
-      :component-name="view.type + '-style'"
-      :obj="{view, param, chart}"
-    />
-    <div
-      v-else
-      style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
-      class="attr-style theme-border-class"
-    >
-      <el-row class="padding-lr">
-        <span class="title-text">{{ $t('chart.style_priority') }}</span>
-        <br>
-        <span class="title-text">{{ view.render }}</span>
-        <br>
-        <span class="title-text">{{ view.type }}</span>
-        <el-row>
-          <el-radio-group
-            v-model="view.stylePriority"
-            class="radio-span"
-            size="mini"
-            @change="calcStyle"
-          >
-            <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
-            <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
-          </el-radio-group>
-        </el-row>
-      </el-row>
-      <el-row>
-        <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
-        <el-collapse v-model="attrActiveNames" class="style-collapse">
-          <el-collapse-item name="color" :title="$t('chart.color')">
-            {{ 'color-selector' }}
-            <color-selector
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onColorChange="onColorChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="view.render && view.render === 'echarts' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'"
-            name="size"
-            :title="$t('chart.size')"
-          >
-            {{ 'size-selector' }}
-            <size-selector
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onSizeChange="onSizeChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap' && chart.type !== 'funnel' && chart.type !== 'bar-stack'"
-            name="size"
-            :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
-          >
-            {{ 'size-selector-ant-v' }}
-            <size-selector-ant-v
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onSizeChange="onSizeChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud' && view.type !== 'label'"
-            name="label"
-            :title="$t('chart.label')"
-          >
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'label-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'label-selector-ant-v' }}
-            </span>
-
-            <label-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onLabelChange="onLabelChange"
-            />
-            <label-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onLabelChange="onLabelChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge' && view.type !== 'label'"
-            name="tooltip"
-            :title="$t('chart.tooltip')"
-          >
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'tooltip-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'tooltip-selector-ant-v' }}
-            </span>
-            <tooltip-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onTooltipChange="onTooltipChange"
-            />
-            <tooltip-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onTooltipChange="onTooltipChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="view.type === 'table-pivot'"
-            name="totalCfg"
-            :title="$t('chart.total_cfg')"
-          >
-            {{ 'total-cfg' }}
-            <total-cfg
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onTotalCfgChange="onTotalCfgChange"
-            />
-          </el-collapse-item>
-        </el-collapse>
-      </el-row>
-      <el-row>
-        <span class="padding-lr">{{ $t('chart.module_style') }}</span>
-        <el-collapse v-model="styleActiveNames" class="style-collapse">
-          <el-collapse-item
-            v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
-            name="xAxis"
-            :title="$t('chart.xAxis')"
-          >
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'x-axis-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'x-axis-selector-ant-v' }}
-            </span>
-            <x-axis-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeXAxisForm="onChangeXAxisForm"
-            />
-            <x-axis-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeXAxisForm="onChangeXAxisForm"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
-            name="yAxis"
-            :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
-          >
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'y-axis-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'y-axis-selector-ant-v' }}
-            </span>
-
-            <y-axis-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeYAxisForm="onChangeYAxisForm"
-            />
-            <y-axis-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeYAxisForm="onChangeYAxisForm"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="view.type && view.type === 'chart-mix'"
-            name="yAxisExt"
-            :title="$t('chart.yAxis_ext')"
-          >
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'y-axis-ext-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'y-axis-ext-selector-ant-v' }}
-            </span>
-
-            <y-axis-ext-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeYAxisForm="onChangeYAxisExtForm"
-            />
-            <y-axis-ext-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeYAxisForm="onChangeYAxisExtForm"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="view.type && view.type.includes('radar')"
-            name="split"
-            :title="$t('chart.split')"
-          >
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'split-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'split-selector-ant-v' }}
-            </span>
-            <split-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeSplitForm="onChangeSplitForm"
-            />
-            <split-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeSplitForm="onChangeSplitForm"
-            />
-          </el-collapse-item>
-          <el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'title-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'title-selector-ant-v' }}
-            </span>
-            <title-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onTextChange="onTextChange"
-            />
-            <title-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onTextChange="onTextChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && view.type !== 'label' && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
-            name="legend"
-            :title="$t('chart.legend')"
-          >
-            <span v-show="view.render && view.render === 'echarts'">
-              {{ 'legend-selector' }}
-            </span>
-            <span v-show="view.render && view.render === 'antv'">
-              {{ 'legend-selector-ant-v' }}
-            </span>
-
-            <legend-selector
-              v-if="view.render && view.render === 'echarts'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onLegendChange="onLegendChange"
-            />
-            <legend-selector-ant-v
-              v-else-if="view.render && view.render === 'antv'"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onLegendChange="onLegendChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            v-if="view.customStyle && view.customStyle.background"
-            name="background"
-            :title="$t('chart.background')"
-          >
-            {{ background-color-selector }}
-            <background-color-selector
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeBackgroundForm="onChangeBackgroundForm"
-            />
-          </el-collapse-item>
-        </el-collapse>
-      </el-row>
-    </div>
-  </el-row>
-</template>
-<script>
-import PluginCom from '@/views/system/plugin/PluginCom'
-import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
-import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
-import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
-import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
-import LabelSelectorAntV from '@/views/chart/components/shape-attr/LabelSelectorAntV'
-import TooltipSelector from '@/views/chart/components/shape-attr/TooltipSelector'
-import TooltipSelectorAntV from '@/views/chart/components/shape-attr/TooltipSelectorAntV'
-import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
-import XAxisSelector from '@/views/chart/components/component-style/XAxisSelector'
-import XAxisSelectorAntV from '@/views/chart/components/component-style/XAxisSelectorAntV'
-import YAxisSelector from '@/views/chart/components/component-style/YAxisSelector'
-import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV'
-import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
-import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
-import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
-import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
-import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
-import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
-import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
-import SplitSelector from "@/views/chart/components/component-style/SplitSelector";
-import SplitSelectorAntV from "@/views/chart/components/component-style/SplitSelectorAntV";
-
-export default {
-  name: 'ChartStyleBack',
-  components: {
-    SplitSelectorAntV,
-    SplitSelector,
-    BackgroundColorSelector,
-    LegendSelectorAntV,
-    LegendSelector,
-    TitleSelectorAntV,
-    TitleSelector,
-    YAxisExtSelectorAntV,
-    YAxisExtSelector,
-    YAxisSelectorAntV,
-    YAxisSelector,
-    XAxisSelectorAntV,
-    XAxisSelector,
-    TotalCfg,
-    TooltipSelectorAntV,
-    TooltipSelector,
-    LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom
-  },
-  props: {
-    chart: {
-      type: Object,
-      required: true
-    },
-    param: {
-      type: Object,
-      required: true
-    },
-    view: {
-      type: Object,
-      required: true
-    },
-    properties: {
-      type: Array,
-      required: false
-    }
-  },
-  data() {
-    return {
-      attrActiveNames: [],
-      styleActiveNames: []
-    }
-  },
-  created() {
-
-  },
-  methods: {
-    calcStyle() {
-      this.$emit('calcStyle')
-    },
-    onColorChange(val) {
-      this.$emit('onColorChange', val)
-    },
-    onSizeChange(val) {
-      this.$emit('onSizeChange', val)
-    },
-    onLabelChange(val) {
-      this.$emit('onLabelChange', val)
-    },
-    onTooltipChange(val) {
-      this.$emit('onTooltipChange', val)
-    },
-    onTotalCfgChange(val) {
-      this.$emit('onTotalCfgChange', val)
-    },
-    onChangeXAxisForm(val) {
-      this.$emit('onChangeXAxisForm', val)
-    },
-    onChangeYAxisForm(val) {
-      this.$emit('onChangeYAxisForm', val)
-    },
-    onChangeYAxisExtForm(val) {
-      this.$emit('onChangeYAxisExtForm', val)
-    },
-    onChangeSplitForm(val) {
-      this.$emit('onChangeSplitForm', val)
-    },
-    onTextChange(val) {
-      this.$emit('onTextChange', val)
-    },
-    onLegendChange(val) {
-      this.$emit('onLegendChange', val)
-    },
-    onChangeBackgroundForm(val) {
-      this.$emit('onChangeBackgroundForm', val)
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-  .padding-lr {
-    padding: 0 6px;
-  }
-  .col {
-    width: 40%;
-    flex: 1;
-    padding: 10px;
-    border: solid 1px #eee;
-    border-radius: 5px;
-    float: left;
-  }
-
-  .col + .col {
-    margin-left: 10px;
-  }
-
-  .view-panel {
-    display: flex;
-    height: 100%;
-    background-color: #f7f8fa;
-  }
-
-  .blackTheme .view-panel {
-    background-color: var(--MainBG);
-  }
-
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  span {
-    font-size: 12px;
-  }
-
-  .tab-header > > > .el-tabs__header {
-    border-top: solid 1px #eee;
-    border-right: solid 1px #eee;
-  }
-
-  .tab-header > > > .el-tabs__item {
-    font-size: 12px;
-    padding: 0 20px !important;
-  }
-
-  .blackTheme .tab-header > > > .el-tabs__item {
-    background-color: var(--MainBG);
-  }
-
-  .tab-header > > > .el-tabs__nav-scroll {
-    padding-left: 0 !important;
-  }
-
-  .tab-header > > > .el-tabs__header {
-    margin: 0 !important;
-  }
-
-  .tab-header > > > .el-tabs__content {
-    height: calc(100% - 40px);
-  }
-
-  .chart-icon {
-    width: 20px;
-    height: 20px;
-  }
-
-  .el-radio {
-    margin: 5px;
-  }
-
-  .el-radio > > > .el-radio__label {
-    padding-left: 0;
-  }
-
-  .attr-style {
-    height: calc(100vh - 56px - 60px - 40px - 40px);
-  }
-
-  .blackTheme .attr-style {
-    color: var(--TextPrimary);
-  }
-
-  .attr-selector {
-    width: 100%;
-    height: 100%;
-    margin: 6px 0;
-    padding: 0 4px;
-    display: flex;
-    align-items: center;
-    background-color: white
-  }
-
-  .blackTheme .attr-selector {
-
-    background-color: var(--MainBG)
-  }
-
-  .dialog-css > > > .el-dialog__title {
-    font-size: 14px;
-  }
-
-  .dialog-css > > > .el-dialog__header {
-    padding: 20px 20px 0;
-  }
-
-  .dialog-css > > > .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
-
-  .blackTheme .theme-border-class {
-    color: var(--TextPrimary) !important;
-    background-color: var(--ContentBG);
-  }
-
-  .blackTheme .padding-lr {
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .blackTheme .theme-item-class {
-    background-color: var(--MainBG) !important;
-    border-color: var(--TableBorderColor) !important;
-  }
-
-  .icon-class {
-    color: #6c6c6c;
-  }
-
-  .blackTheme .icon-class {
-    color: #cccccc;
-  }
-
-  .radio-span > > > .el-radio__label {
-    margin-left: 4px;
-  }
-
-  .view-title-name {
-    display: -moz-inline-box;
-    display: inline-block;
-    width: 130px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-left: 45px;
-  }
-
-  ::v-deep .item-axis {
-    width: 128px !important;
-  }
-
-  ::v-deep .el-slider__input {
-    width: 80px !important;
-  }
-
-  ::v-deep .el-input-number--mini {
-    width: 100px !important;
-  }
-
-  ::v-deep .el-slider__runway.show-input{
-    width: 80px!important;
-  }
-
-  .no-senior {
-    width: 100%;
-    text-align: center;
-    font-size: 12px;
-    padding-top: 40px;
-    overflow: auto;
-    border-right: 1px solid #e6e6e6;
-    height: 100%;
-  }
-
-  .form-item-slider>>>.el-form-item__label{
-    font-size: 12px;
-    line-height: 38px;
-  }
-  .form-item>>>.el-form-item__label{
-    font-size: 12px;
-  }
-  </style>
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index 90f0ed7338..187739d088 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -30,6 +30,7 @@ import PanelList from '../list/PanelList'
 import PanelViewShow from '../list/PanelViewShow'
 import ShareTree from '../GrantAuth/shareTree'
 import Enshrine from '../enshrine/index'
+import { pluginTypes } from '@/api/chart/chart'
 
 export default {
   name: 'PanelMain',
@@ -59,6 +60,16 @@ export default {
     }
   },
   mounted() {
+    // init all views (include plugins) base info
+    localStorage.removeItem('plugin-views')
+    pluginTypes().then(res => {
+      const plugins = res.data
+      localStorage.setItem('plugin-views', JSON.stringify(plugins))
+      this.$store.commit('initViewRender', plugins)
+    }).catch(e => {
+      localStorage.setItem('plugin-views', null)
+      this.$store.commit('initViewRender', plugins)
+    })
     this.clear()
   },
   methods: {