diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index e70eaaa672..c94aa72b4f 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -31,6 +31,7 @@
       :track-menu="trackMenu"
       :search-count="searchCount"
       :terminal-type="scaleCoefficientType"
+      :scale="scale"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
@@ -41,6 +42,7 @@
       :chart="chart"
       :track-menu="trackMenu"
       :search-count="searchCount"
+      :scale="scale"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
@@ -177,7 +179,8 @@ export default {
       pre: null,
       preCanvasPanel: null,
       sourceCustomAttrStr: null,
-      sourceCustomStyleStr: null
+      sourceCustomStyleStr: null,
+      scale: 1
     }
   },
 
@@ -412,11 +415,11 @@ export default {
     },
     // 根据仪表板的缩放比例，修改视图内部参数
     mergeScale() {
-      const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
+      this.scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
       const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
       const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
-      recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType)
-      recursionTransObj(customStyleTrans, customStyleChart, scale, this.scaleCoefficientType)
+      recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
+      recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
 
       // 移动端地图标签不显示
       if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 223869fa6b..0789e81d58 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -96,10 +96,10 @@ export function panelInit(componentData, componentStyle) {
     item.sizey = (item.sizey || 5)
     // 初始化密度为最高密度
     if (componentStyle.aidedDesign.matrixBase !== 4) {
-      item.x = (item.x - 1) * componentStyle.aidedDesign.matrixBase + 1
-      item.y = (item.y - 1) * componentStyle.aidedDesign.matrixBase + 1
-      item.sizex = item.sizex * componentStyle.aidedDesign.matrixBase
-      item.sizey = item.sizey * componentStyle.aidedDesign.matrixBase
+      item.x = (item.x - 1) * 4 + 1
+      item.y = (item.y - 1) * 4 + 1
+      item.sizex = item.sizex * 4
+      item.sizey = item.sizey * 4
     }
     item.mobileSelected = (item.mobileSelected || false)
     item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index eea7682d64..8786a854ae 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -55,7 +55,8 @@ export const DEFAULT_SIZE = {
   liquidOutlineDistance: 8,
   liquidWaveLength: 128,
   liquidWaveCount: 3,
-  liquidShape: 'circle'
+  liquidShape: 'circle',
+  tablePageMode: 'page'
 }
 export const DEFAULT_LABEL = {
   show: false,
diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js
index 74922e41e5..477d155d4d 100644
--- a/frontend/src/views/chart/chart/gauge/gauge.js
+++ b/frontend/src/views/chart/chart/gauge/gauge.js
@@ -1,8 +1,9 @@
 import { componentStyle } from '../common/common'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+import { getScaleValue } from '@/components/canvas/utils/style'
 
-export function baseGaugeOption(chart_option, chart) {
+export function baseGaugeOption(chart_option, chart, scale = 1) {
   // 处理shape attr
   let customAttr = {}
   if (chart.customAttr) {
@@ -50,6 +51,25 @@ export function baseGaugeOption(chart_option, chart) {
         value: chart.data.series[0].data[0]
       }
       chart_option.series[0].data.push(y)
+
+      chart_option.series[0].axisTick = {
+        splitNumber: getScaleValue(5, scale), // 刻度间隔数
+        length: getScaleValue(10, scale), // 子刻度线长度
+        lineStyle: {
+          width: getScaleValue(2, scale) // 子刻度线宽度
+        }
+      }
+      chart_option.series[0].splitLine = {
+        length: getScaleValue(18, scale), // 刻度线长度
+        lineStyle: {
+          width: getScaleValue(2, scale) // 刻度线宽度
+        }
+      }
+      chart_option.series[0].axisLabel = {
+        distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
+        fontSize: getScaleValue(20, scale)// 刻度值字体大小
+      }
+
       // threshold
       if (chart.senior) {
         const range = []
@@ -87,29 +107,30 @@ export function baseGaugeOption(chart_option, chart) {
             show: false
           }
           chart_option.series[0].axisTick = {
-            splitNumber: 5, // TODO 刻度间隔数
-            length: 10, // TODO 子刻度线长度
+            splitNumber: getScaleValue(5, scale), // 刻度间隔数
+            length: getScaleValue(10, scale), // 子刻度线长度
             lineStyle: {
               color: 'auto',
-              width: 2// TODO 子刻度线宽度
+              width: getScaleValue(2, scale) // 子刻度线宽度
             }
           }
           chart_option.series[0].splitLine = {
-            length: 18, // TODO 刻度线长度
+            length: getScaleValue(18, scale), // 刻度线长度
             lineStyle: {
               color: 'auto',
-              width: 2// TODO 刻度线宽度
+              width: getScaleValue(2, scale) // 刻度线宽度
             }
           }
           chart_option.series[0].axisLabel = {
             color: 'auto',
-            distance: 20, // TODO 刻度值文字里刻度线距离
-            fontSize: 20// TODO 刻度值字体大小
+            distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
+            fontSize: getScaleValue(20, scale)// 刻度值字体大小
           }
         }
       }
     }
   }
+  console.log(chart_option.series[0])
   // console.log(chart_option);
   componentStyle(chart_option, chart)
   return chart_option
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index c492061a2a..d444678c36 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -1,8 +1,9 @@
 import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
 import { Gauge } from '@antv/g2plot'
 import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+import { getScaleValue } from '@/components/canvas/utils/style'
 
-export function baseGaugeOptionAntV(plot, container, chart, action) {
+export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
   let max, labelContent, startAngel, endAngel
   // theme
   const theme = getTheme(chart)
@@ -76,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
     axis: {
       label: {
         style: {
-          fontSize: 14// TODO 刻度值字体大小
+          fontSize: getScaleValue(14, scale) // 刻度值字体大小
         }
       },
       tickLine: {
-        length: -12, // TODO 刻度线长度
+        length: getScaleValue(12, scale) * -1, // 刻度线长度
         style: {
-          lineWidth: 1// TODO 刻度线宽度
+          lineWidth: getScaleValue(1, scale)// 刻度线宽度
         }
       },
       subTickLine: {
-        count: 4, // TODO 子刻度数
-        length: -6, // TODO 子刻度线长度
+        count: 4, // 子刻度数
+        length: getScaleValue(6, scale) * -1, // 子刻度线长度
         style: {
-          lineWidth: 1// TODO 子刻度线宽度
+          lineWidth: getScaleValue(1, scale)// 子刻度线宽度
         }
       }
     }
@@ -113,11 +114,21 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
       },
       pin: {
         style: {
-          stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length]
+          stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length],
+          r: getScaleValue(10, scale)
+        }
+      }
+    }
+  } else {
+    options.indicator = {
+      pin: {
+        style: {
+          r: getScaleValue(10, scale)
         }
       }
     }
   }
+  console.log(options.indicator.pin)
 
   // 开始渲染
   if (plot) {
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index b60db2e98b..335798fc3f 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -115,6 +115,11 @@ export default {
     terminalType: {
       type: String,
       default: 'pc'
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 1
     }
   },
   data() {
@@ -210,7 +215,7 @@ export default {
       } else if (chart.type === 'radar') {
         chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
       } else if (chart.type === 'gauge') {
-        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
+        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart, this.scale)
       } else if (chart.type === 'scatter') {
         chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType)
       } else if (chart.type === 'treemap') {
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 66c9437c86..d4a1d07092 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -50,6 +50,11 @@ export default {
       type: Number,
       required: false,
       default: 0
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 1
     }
   },
   data() {
@@ -153,7 +158,7 @@ export default {
       } else if (chart.type === 'radar') {
         this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'gauge') {
-        this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+        this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction, this.scale)
       } else if (chart.type === 'pie') {
         this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'pie-rose') {
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 2ff39b4179..47b07eb64a 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -6,9 +6,9 @@
     </span>
     <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
       <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
-      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
+      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? (showPage ? 'table-dom-info-drill' : 'table-dom-info-drill-pull') : (showPage ? 'table-dom-info' : 'table-dom-info-pull')" />
       <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
-      <el-row v-show="chart.type === 'table-info'" class="table-page">
+      <el-row v-show="showPage" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
           <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
@@ -99,7 +99,8 @@ export default {
         pageSize: 20,
         show: 0
       },
-      tableData: []
+      tableData: [],
+      showPage: false
     }
   },
 
@@ -135,17 +136,19 @@ export default {
   methods: {
     initData() {
       let datas = []
+      this.showPage = false
       if (this.chart.data && this.chart.data.fields) {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         const attr = JSON.parse(this.chart.customAttr)
         this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.type === 'table-info') {
+        if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
           // 计算分页
           this.currentPage.show = datas.length
           const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
           const pageEnd = pageStart + this.currentPage.pageSize
           datas = datas.slice(pageStart, pageEnd)
+          this.showPage = true
         }
       } else {
         this.fields = []
@@ -380,12 +383,18 @@ export default {
 .table-dom-info{
   height:calc(100% - 36px);
 }
+.table-dom-info-pull{
+  height:calc(100%);
+}
 .table-dom-normal{
   height:100%;
 }
 .table-dom-info-drill{
   height:calc(100% - 36px - 12px);
 }
+.table-dom-info-drill-pull{
+  height:calc(100% - 12px);
+}
 .table-dom-normal-drill{
   height:calc(100% - 12px);
 }
@@ -409,4 +418,10 @@ export default {
 .page-style >>> .el-input__inner{
   height: 24px;
 }
+.page-style >>> button{
+  background: transparent!important;
+}
+.page-style >>> li{
+  background: transparent!important;
+}
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 4634eee7bb..aef968009d 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -84,7 +84,13 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
+        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
+          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
+            <el-option :label="$t('chart.page_mode_page')" value="page" />
+            <el-option :label="$t('chart.page_mode_pull')" value="pull" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
           <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
             <el-option
               v-for="item in pageSizeOptions"
@@ -110,6 +116,9 @@
         <el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
+        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
@@ -340,6 +349,7 @@ export default {
           this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
           this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
 
+          this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
         }
       }
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index fdc96396d9..6bde9cd971 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -81,7 +81,13 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
+        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
+          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
+            <el-option :label="$t('chart.page_mode_page')" value="page" />
+            <el-option :label="$t('chart.page_mode_pull')" value="pull" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
           <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
             <el-option
               v-for="item in pageSizeOptions"
@@ -355,6 +361,7 @@ export default {
           this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
           this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
 
+          this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
 
           this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index c9afef2d35..509628dadc 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -23,6 +23,7 @@
           :resizable="true"
           sortable
           :title="field.name"
+          :width="columnWidth"
         >
           <!--        <template slot="header">-->
           <!--          <span>{{ field.name }}</span>-->
@@ -30,7 +31,7 @@
         </ux-table-column>
       </ux-grid>
 
-      <el-row v-show="chart.type === 'table-info'" class="table-page">
+      <el-row v-show="showPage" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
           <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
@@ -56,6 +57,7 @@
 <script>
 import { hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
+import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'TableNormal',
@@ -118,7 +120,9 @@ export default {
         page: 1,
         pageSize: 20,
         show: 0
-      }
+      },
+      showPage: false,
+      columnWidth: DEFAULT_SIZE.tableColumnWidth
     }
   },
   computed: {
@@ -162,17 +166,29 @@ export default {
     initData() {
       const that = this
       let datas = []
+      this.showPage = false
       if (this.chart.data) {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         const attr = JSON.parse(this.chart.customAttr)
         this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
+
+        // column width
+        const containerWidth = this.$refs.tableContainer.offsetWidth
+        const columnWidth = attr.size.tableColumnWidth ? attr.size.tableColumnWidth : this.columnWidth
+        if (columnWidth < (containerWidth / this.fields.length)) {
+          this.columnWidth = containerWidth / this.fields
+        } else {
+          this.columnWidth = columnWidth
+        }
+
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.type === 'table-info') {
+        if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
           // 计算分页
           this.currentPage.show = datas.length
           const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
           const pageEnd = pageStart + this.currentPage.pageSize
           datas = datas.slice(pageStart, pageEnd)
+          this.showPage = true
         }
       } else {
         this.fields = []
@@ -191,7 +207,7 @@ export default {
       this.$nextTick(() => {
         if (this.$refs.tableContainer) {
           let pageHeight = 0
-          if (this.chart.type === 'table-info') {
+          if (this.showPage) {
             pageHeight = 36
           }
           const currentHeight = this.$refs.tableContainer.offsetHeight
@@ -378,4 +394,10 @@ export default {
   .page-style >>> .el-input__inner{
     height: 24px;
   }
+  .page-style >>> button{
+    background: transparent!important;
+  }
+  .page-style >>> li{
+    background: transparent!important;
+  }
 </style>