From 66b75928b3954e4a62500205e193f3c17d29c7ff Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 31 Jan 2022 12:07:10 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20S2=E6=98=8E=E7=BB=86=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   2 +-
 .../canvas/custom-component/UserView.vue      |  18 +-
 .../views/chart/chart/common/common_table.js  |  10 +
 .../src/views/chart/chart/table/table-info.js |  59 +++
 .../chart/components/ChartComponentS2.vue     | 362 ++++++++++++++++++
 frontend/src/views/chart/view/ChartEdit.vue   |  12 +-
 6 files changed, 459 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/views/chart/chart/common/common_table.js
 create mode 100644 frontend/src/views/chart/chart/table/table-info.js
 create mode 100644 frontend/src/views/chart/components/ChartComponentS2.vue

diff --git a/frontend/package.json b/frontend/package.json
index 3da6eec8cd..5d9f2444c6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.3.32",
-    "@antv/s2": "^1.6.0",
+    "@antv/s2": "^1.7.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@tinymce/tinymce-vue": "^3.2.8",
     "axios": "^0.21.1",
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 611338e0e1..d03de10662 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -37,6 +37,16 @@
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
+    <chart-component-s2
+      v-if="charViewS2ShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
     <table-normal
       v-if="tableShowFlag"
       :ref="element.propValue.id"
@@ -71,10 +81,11 @@ import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 import EditBarView from '@/components/canvas/components/Editor/EditBarView'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
+import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 
 export default {
   name: 'UserView',
-  components: { EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: { ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
     element: {
       type: Object,
@@ -169,8 +180,11 @@ export default {
     charViewG2ShowFlag() {
       return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
     },
+    charViewS2ShowFlag() {
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
+    },
     tableShowFlag() {
-      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table')
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && this.renderComponent() === 'echarts'
     },
     labelShowFlag() {
       return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')
diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
new file mode 100644
index 0000000000..e38cbcf94a
--- /dev/null
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -0,0 +1,10 @@
+
+export function getCustomTheme(chart) {
+  const theme = {}
+  const background = {
+    color: '#00000000'
+  }
+
+  theme.background = background
+  return theme
+}
diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js
new file mode 100644
index 0000000000..15fce23ebf
--- /dev/null
+++ b/frontend/src/views/chart/chart/table/table-info.js
@@ -0,0 +1,59 @@
+import { TableSheet } from '@antv/s2'
+import { getCustomTheme } from '@/views/chart/chart/common/common_table'
+
+export function baseTableInfo(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // data
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
+    }
+    return
+  }
+
+  const columns = []
+  const meta = []
+  fields.forEach(ele => {
+    columns.push(ele.dataeaseName)
+
+    meta.push({
+      field: ele.dataeaseName,
+      name: ele.name
+    })
+  })
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      columns: columns
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    // showSeriesNumber: true
+    style: {
+      cellCfg: {
+        width: 500
+      }
+    }
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
new file mode 100644
index 0000000000..4421891aaf
--- /dev/null
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -0,0 +1,362 @@
+<template>
+  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
+    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
+    <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+      <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
+    </span>
+    <div style="width: 100%;overflow: hidden;padding: 8px;" :style="{height:chartHeight,background:container_bg_class.background}">
+      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom" />
+      <el-row v-show="chart.type === 'table-info'" class="table-page">
+        <span class="total-style">
+          {{ $t('chart.total') }}
+          <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
+          {{ $t('chart.items') }}
+        </span>
+        <el-pagination
+          small
+          :current-page="currentPage.page"
+          :page-sizes="[10,20,50,100]"
+          :page-size="currentPage.pageSize"
+          :pager-count="5"
+          layout="prev, pager, next"
+          :total="currentPage.show"
+          class="page-style"
+          @current-change="pageClick"
+          @size-change="pageChange"
+        />
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { uuid } from 'vue-uuid'
+import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { baseTableInfo } from '@/views/chart/chart/table/table-info'
+
+export default {
+  name: 'ChartComponentS2',
+  components: { ViewTrackBar },
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Object,
+      required: false,
+      default: function() {
+        return {}
+      }
+    },
+    trackMenu: {
+      type: Array,
+      required: false,
+      default: function() {
+        return ['drill']
+      }
+    },
+    searchCount: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      chartId: uuid.v1(),
+      showTrackBar: true,
+      trackBarStyle: {
+        position: 'absolute',
+        left: '0px',
+        top: '0px'
+      },
+      pointParam: null,
+      dynamicAreaCode: null,
+      borderRadius: '0px',
+      chartHeight: '100%',
+      title_class: {
+        margin: '0 0',
+        width: '100%',
+        fontSize: '18px',
+        color: '#303133',
+        textAlign: 'left',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      container_bg_class: {
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      title_show: true,
+      antVRenderStatus: false,
+      currentPage: {
+        page: 1,
+        pageSize: 20,
+        show: 0
+      },
+      tableData: []
+    }
+  },
+
+  computed: {
+    trackBarStyleTime() {
+      return this.trackBarStyle
+    },
+    bg_class() {
+      return {
+        borderRadius: this.borderRadius
+      }
+    }
+  },
+  watch: {
+    chart: {
+      handler(newVal, oldVla) {
+        this.initData()
+        this.initTitle()
+        this.calcHeightDelay()
+        new Promise((resolve) => { resolve() }).then(() => {
+          this.drawView()
+        })
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+    this.preDraw()
+  },
+  methods: {
+    initData() {
+      let datas = []
+      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)
+        datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
+        if (this.chart.type === 'table-info') {
+          // 计算分页
+          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)
+        }
+      } else {
+        this.fields = []
+        datas = []
+        this.resetPage()
+      }
+      this.tableData = datas
+    },
+    preDraw() {
+      this.initData()
+      this.initTitle()
+      this.calcHeightDelay()
+      new Promise((resolve) => { resolve() }).then(() => {
+        this.drawView()
+      })
+      const that = this
+      window.onresize = function() {
+        that.initData()
+        that.initTitle()
+        that.calcHeightDelay()
+        new Promise((resolve) => { resolve() }).then(() => {
+          that.drawView()
+        })
+      }
+    },
+    drawView() {
+      const chart = this.chart
+      // type
+      // if (chart.data) {
+      this.antVRenderStatus = true
+      if (!chart.data || (!chart.data.datas && !chart.data.series)) {
+        chart.data = {
+          datas: [{}],
+          series: [
+            {
+              data: [0]
+            }
+          ]
+        }
+      }
+      if (chart.type === 'table-info') {
+        this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
+      } else {
+        if (this.myChart) {
+          this.antVRenderStatus = false
+          this.myChart.destroy()
+        }
+      }
+
+      if (this.myChart && this.searchCount > 0) {
+        this.myChart.options.animation = false
+      }
+
+      if (this.myChart && this.antVRenderStatus) {
+        this.myChart.render()
+      }
+      this.setBackGroundBorder()
+    },
+
+    antVAction(param) {
+      console.log(param)
+      if (this.chart.type === 'treemap') {
+        this.pointParam = param.data.data
+      } else {
+        this.pointParam = param.data
+      }
+      if (this.trackMenu.length < 2) { // 只有一个事件直接调用
+        this.trackClick(this.trackMenu[0])
+      } else { // 视图关联多个事件
+        this.trackBarStyle.left = param.x + 'px'
+        this.trackBarStyle.top = (param.y + 10) + 'px'
+        this.$refs.viewTrack.trackButtonClick()
+      }
+    },
+    setBackGroundBorder() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
+    },
+    chartResize() {
+      this.initData()
+      this.initTitle()
+      this.calcHeightDelay()
+      new Promise((resolve) => { resolve() }).then(() => {
+        this.drawView()
+      })
+    },
+    trackClick(trackAction) {
+      const param = this.pointParam
+      if (!param || !param.data || !param.data.dimensionList) {
+        // 地图提示没有关联字段 其他没有维度信息的 直接返回
+        if (this.chart.type === 'map') {
+          this.$warning(this.$t('panel.no_drill_field'))
+        }
+        return
+      }
+      const linkageParam = {
+        option: 'linkage',
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList
+      }
+      const jumpParam = {
+        option: 'jump',
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList
+      }
+      switch (trackAction) {
+        case 'drill':
+          this.$emit('onChartClick', this.pointParam)
+          break
+        case 'linkage':
+          this.$store.commit('addViewTrackFilter', linkageParam)
+          break
+        case 'jump':
+          this.$emit('onJumpClick', jumpParam)
+          break
+        default:
+          break
+      }
+    },
+    // title and bg
+    initTitle() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.text) {
+          this.title_show = customStyle.text.show
+          // this.title_class.fontSize = customStyle.text.fontSize + 'px'
+          this.title_class.color = customStyle.text.color
+          this.title_class.textAlign = customStyle.text.hPosition
+          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
+          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          if (this.$refs.title) {
+            this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
+          }
+        }
+        if (customStyle.background) {
+          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+
+          this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        }
+      }
+    },
+
+    calcHeightRightNow() {
+      this.$nextTick(() => {
+        if (this.$refs.chartContainer) {
+          const currentHeight = this.$refs.chartContainer.offsetHeight
+          if (this.$refs.title) {
+            const titleHeight = this.$refs.title.offsetHeight
+            this.chartHeight = (currentHeight - titleHeight) + 'px'
+          }
+        }
+      })
+    },
+    calcHeightDelay() {
+      this.calcHeightRightNow()
+      setTimeout(() => {
+        this.calcHeightRightNow()
+      }, 100)
+    },
+
+    pageChange(val) {
+      this.currentPage.pageSize = val
+      this.initData()
+      this.drawView()
+    },
+
+    pageClick(val) {
+      this.currentPage.page = val
+      this.initData()
+      this.drawView()
+    },
+
+    resetPage() {
+      this.currentPage = {
+        page: 1,
+        pageSize: 20,
+        show: 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.table-dom{
+  height:calc(100% - 36px);
+}
+.table-page{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  overflow: hidden;
+  margin-top: 8px;
+}
+.page-style{
+  margin-right: auto;
+}
+.total-style{
+  flex: 1;
+  font-size: 12px;
+  color: #606266;
+  white-space:nowrap;
+}
+.page-style >>> .el-input__inner{
+  height: 24px;
+}
+</style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index f32461c88f..9675393638 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -769,8 +769,16 @@
               class="chart-class"
               @onChartClick="chartClick"
             />
+            <chart-component-s2
+              v-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              ref="dynamicChart"
+              :chart-id="chart.id"
+              :chart="chart"
+              class="chart-class"
+              @onChartClick="chartClick"
+            />
             <table-normal
-              v-if="httpRequest.status && chart.type && chart.type.includes('table')"
+              v-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts'"
               :show-summary="chart.type === 'table-normal'"
               :chart="chart"
               class="table-class"
@@ -973,10 +981,12 @@ import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAn
 import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
 import CompareEdit from '@/views/chart/components/compare/CompareEdit'
 import { compareItem } from '@/views/chart/chart/compare'
+import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 
 export default {
   name: 'ChartEdit',
   components: {
+    ChartComponentS2,
     CompareEdit,
     SplitSelectorAntV,
     SizeSelectorAntV,

From 6c7d65fc776d270091312843850d163610a12b32 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 31 Jan 2022 14:34:31 +0800
Subject: [PATCH 2/4] feat: S2

---
 frontend/src/lang/en.js                       |  6 ++-
 frontend/src/lang/tw.js                       |  6 ++-
 frontend/src/lang/zh.js                       |  6 ++-
 frontend/src/views/chart/chart/chart.js       |  2 +
 .../shape-attr/SizeSelectorAntV.vue           | 38 +++++++++++++------
 frontend/src/views/chart/view/ChartEdit.vue   |  2 +-
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index c1a0036c7a..3135ae9403 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1016,7 +1016,11 @@ export default {
     filter_exp: 'Filter Value',
     filter_type: 'Filter Type',
     filter_value_can_not_str: 'Value type can not input string',
-    enum_value_can_not_null: 'Enum Value can not empty.'
+    enum_value_can_not_null: 'Enum Value can not empty.',
+    table_config: 'Table Config',
+    table_column_width_config: 'Column Width',
+    table_column_adapt: 'Adapt',
+    table_column_custom: 'Custom'
   },
   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 622f135d37..39d208e5fc 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1016,7 +1016,11 @@ export default {
     filter_exp: '過濾值',
     filter_type: '過濾方式',
     filter_value_can_not_str: '數值類型字段過濾值不能包含文本',
-    enum_value_can_not_null: '字段枚舉值不能為空'
+    enum_value_can_not_null: '字段枚舉值不能為空',
+    table_config: '表格配置',
+    table_column_width_config: '列寬調整',
+    table_column_adapt: '自適應',
+    table_column_custom: '自定義'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 79869971c1..32bfd2af3e 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1018,7 +1018,11 @@ export default {
     filter_exp: '过滤值',
     filter_type: '过滤方式',
     filter_value_can_not_str: '数值类型字段过滤值不能包含文本',
-    enum_value_can_not_null: '字段枚举值不能为空'
+    enum_value_can_not_null: '字段枚举值不能为空',
+    table_config: '表格配置',
+    table_column_width_config: '列宽调整',
+    table_column_adapt: '自适应',
+    table_column_custom: '自定义'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index e0f36d1f81..9356fd684b 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -31,6 +31,8 @@ export const DEFAULT_SIZE = {
   tableTitleHeight: 36,
   tableItemHeight: 36,
   tablePageSize: '20',
+  tableColumnMode: 'adapt',
+  tableColumnWidth: 100,
   gaugeMin: 0,
   gaugeMax: 100,
   gaugeStartAngle: 225,
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index ad36ad6972..b2b58c76b7 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -81,6 +81,16 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :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-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in pageSizeOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
           <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -92,20 +102,19 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+          <el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
         <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-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :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"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
+        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
+          <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
+            <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
+            <el-radio label="custom"><span>{{ $t('chart.table_column_custom') }}</span></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableColumnWidth" :min="100" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
 
@@ -322,6 +331,9 @@ export default {
           this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
 
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
+
+          this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
+          this.sizeForm.tableColumnWidth = this.sizeForm.tableColumnWidth ? this.sizeForm.tableColumnWidth : DEFAULT_SIZE.tableColumnWidth
         }
       }
     },
@@ -361,7 +373,9 @@ export default {
 .el-select-dropdown__item{
   padding: 0 20px;
 }
-  span{font-size: 12px}
+span{
+  font-size: 12px
+}
 
 .el-form-item{
   margin-bottom: 6px;
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 9675393638..73c15a2f72 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -565,7 +565,7 @@
                   <el-collapse-item
                     v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap'"
                     name="size"
-                    :title="$t('chart.size')"
+                    :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
                   >
                     <size-selector-ant-v
                       :param="param"

From 52a976c8a0043c8df7c79eff1f69314a7de66668 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Tue, 1 Feb 2022 15:30:09 +0800
Subject: [PATCH 3/4] feat: S2

---
 .../views/chart/chart/common/common_table.js  | 27 ++++++++
 .../src/views/chart/chart/table/table-info.js | 61 +++++++++++++++++--
 .../chart/components/ChartComponentS2.vue     | 12 +++-
 3 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index e38cbcf94a..81214b36a2 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -8,3 +8,30 @@ export function getCustomTheme(chart) {
   theme.background = background
   return theme
 }
+
+export function getSize(chart) {
+  const size = {}
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      size.colCfg = {
+        height: s.tableTitleHeight
+      }
+      size.cellCfg = {
+        height: s.tableItemHeight
+      }
+      if (!s.tableColumnMode || s.tableColumnMode === 'adapt') {
+        delete size.cellCfg.width
+        size.layoutWidthType = 'compact'
+      } else {
+        delete size.layoutWidthType
+        size.cellCfg.width = s.tableColumnWidth
+      }
+    }
+  }
+
+  return size
+}
diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js
index 15fce23ebf..080a4aaf33 100644
--- a/frontend/src/views/chart/chart/table/table-info.js
+++ b/frontend/src/views/chart/chart/table/table-info.js
@@ -1,5 +1,5 @@
 import { TableSheet } from '@antv/s2'
-import { getCustomTheme } from '@/views/chart/chart/common/common_table'
+import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
 
 export function baseTableInfo(s2, container, chart, action, tableData) {
   const containerDom = document.getElementById(container)
@@ -38,11 +38,60 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
     // showSeriesNumber: true
-    style: {
-      cellCfg: {
-        width: 500
-      }
-    }
+    style: getSize(chart)
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}
+
+export function baseTableNormal(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // data
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
+    }
+    return
+  }
+
+  const columns = []
+  const meta = []
+  fields.forEach(ele => {
+    columns.push(ele.dataeaseName)
+
+    meta.push({
+      field: ele.dataeaseName,
+      name: ele.name
+    })
+  })
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      columns: columns
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    // showSeriesNumber: true
+    style: getSize(chart)
   }
 
   // 开始渲染
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 4421891aaf..25e68cee82 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -5,7 +5,8 @@
       <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
     </span>
     <div style="width: 100%;overflow: hidden;padding: 8px;" :style="{height:chartHeight,background:container_bg_class.background}">
-      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom" />
+      <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
+      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-info" />
       <el-row v-show="chart.type === 'table-info'" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
@@ -33,7 +34,7 @@
 import { uuid } from 'vue-uuid'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { baseTableInfo } from '@/views/chart/chart/table/table-info'
+import { baseTableInfo, baseTableNormal } from '@/views/chart/chart/table/table-info'
 
 export default {
   name: 'ChartComponentS2',
@@ -186,6 +187,8 @@ export default {
       }
       if (chart.type === 'table-info') {
         this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
+      } else if (chart.type === 'table-normal') {
+        this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
       } else {
         if (this.myChart) {
           this.antVRenderStatus = false
@@ -336,9 +339,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.table-dom{
+.table-dom-info{
   height:calc(100% - 36px);
 }
+.table-dom-normal{
+  height:100%;
+}
 .table-page{
   display: flex;
   align-items: center;

From 85a6f1ae10a80f8eb89681c10a41f5ce3c4ef28a Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 2 Feb 2022 13:29:46 +0800
Subject: [PATCH 4/4] feat: S2

---
 .../views/chart/chart/common/common_table.js  | 47 +++++++++++++++++--
 .../shape-attr/SizeSelectorAntV.vue           | 12 ++++-
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 81214b36a2..28a9fef32d 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -1,11 +1,50 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export function getCustomTheme(chart) {
-  const theme = {}
-  const background = {
-    color: '#00000000'
+  const theme = {
+    background: {
+      color: '#00000000'
+    },
+    colCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      bolderText: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      }
+    },
+    dataCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      text: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableItemFontSize
+      }
+    }
+  }
+
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+      theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      theme.colCell.bolderText.fill = c.tableFontColor
+      theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
+      theme.dataCell.text.fill = c.tableFontColor
+    }
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
+    }
   }
 
-  theme.background = background
   return theme
 }
 
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index b2b58c76b7..74dfa0bf06 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -110,8 +110,18 @@
         <el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
           <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
             <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
-            <el-radio label="custom"><span>{{ $t('chart.table_column_custom') }}</span></el-radio>
+            <el-radio label="custom">
+              <span>{{ $t('chart.table_column_custom') }}</span>
+            </el-radio>
           </el-radio-group>
+          <el-tooltip class="item" effect="dark" placement="bottom">
+            <div slot="content">
+              列宽并非任何时候都能生效。
+              <br>
+              容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。
+            </div>
+            <i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
+          </el-tooltip>
         </el-form-item>
         <el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.tableColumnWidth" :min="100" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />