项目初始化

datax-ui/src/components/PivotTable/utils/constants.js

+export const CELL_MIN_HEIGHT = 38
+
+export const SEPARATOR = ':'

datax-ui/src/components/PivotTable/utils/convert_path_to_map.js

+import { SEPARATOR } from './constants'
+
+// Convert path to object
+export default (paths, keys) => {
+  return paths.map(path => {
+    const pathArr = path.split(SEPARATOR)
+    const obj = {}
+
+    keys.forEach((key, index) => {
+      if (pathArr[index]) {
+        obj[key] = pathArr[index]
+      }
+    })
+
+    return obj
+  })
+}

datax-ui/src/components/PivotTable/utils/get_height_by_count.js

+import { CELL_MIN_HEIGHT } from './constants'
+
+export default count => count * CELL_MIN_HEIGHT + 'px'

datax-ui/src/components/PivotTable/utils/index.js

+import mergeBaseInfo from './merge_base_info'
+import convertPathToMap from './convert_path_to_map'
+import getHeightByCount from './get_height_by_count'
+
+export {
+  mergeBaseInfo,
+  convertPathToMap,
+  getHeightByCount
+}

datax-ui/src/components/PivotTable/utils/merge_base_info.js

+// merge base info
+export default function mergeBaseInfo(info = {}) {
+  const _baseCellInfo = {
+    value: '',
+    x: 0,
+    y: 0,
+    colspan: 1,
+    rowspan: 1
+  }
+  return Object.assign({}, _baseCellInfo, info)
+}

datax-ui/src/views/visual/datachart/DataChartBuild.vue

@@ -89,7 +89,7 @@
           <el-tabs type="card">
             <el-tab-pane label="图表预览">
               <div class="widget-center-pane-chart">
-                <chart-panel v-if="visible" id="chartPanel" ref="chartPanel" :chart-schema="widget" :chart-data="[]" />
+                <chart-panel v-if="visible" id="chartPanel" ref="chartPanel" :chart-schema="widget" :chart-data="chartData.data" />
               </div>
             </el-tab-pane>
             <el-tab-pane label="查询脚本">

datax-ui/src/views/visual/datachart/components/widgets/ChartTable.vue

 <template>
-  <div ref="chart" :style="chartStyle">
-    <my-chart-table :col="tableCol" :data="tableData" />
+  <div ref="chart" :style="chartStyle" style="overflow: auto;">
+    <pivot-table
+      ref="pivottable"
+      :data="data"
+      :rows="rows"
+      :columns="columns"
+      :values="values"
+    />
   </div>
 </template>
 
 <script>
-import MyChartTable from './charttable/MyChartTable'
+import PivotTable from '@/components/PivotTable'
 
 export default {
   name: 'ChartTable',
   components: {
-    MyChartTable
+    PivotTable
   },
   props: {
     data: {
@@ -38,60 +44,34 @@ export default {
     }
   },
   computed: {
-    tableCol() {
-      return [
-        {
-          prop: 'date',
-          label: '日期'
-        },
-        {
-          label: '配送信息',
-          children: [
-            {
-              prop: 'name',
-              label: '姓名'
-            },
-            {
-              label: '地址',
-              children: [
-                {
-                  prop: 'province',
-                  label: '省份'
-                },
-                {
-                  prop: 'city',
-                  label: '市区'
-                },
-                {
-                  prop: 'address',
-                  label: '地址'
-                }
-              ]
-            }
-          ]
+    rows() {
+      return this.chartSchema.rows.map((row, index, arr) => {
+        return {
+          key: `${row.col}`,
+          label: `${row.col}`
         }
-      ]
+      })
     },
-    tableData() {
-      return [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
+    columns() {
+      return this.chartSchema.columns.map((column, index, arr) => {
+        return {
+          key: `${column.col}`,
+          label: `${column.col}`
+        }
+      })
     },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
+    values() {
+      return this.chartSchema.measures.map((measure, index, arr) => {
+        return {
+          key: `${measure.col}`,
+          label: `${measure.col}`
         }
-      ]
+      })
     }
+  },
+  created() {
+    console.log(this.data)
+    console.log(this.chartSchema)
   }
 }
 </script>