项目初始化

datax-ui/src/components/PivotTable/index.vue

@@ -15,7 +15,7 @@
       <tbody>
         <tr v-for="(tr, index) in combineValues" :key="index">
           <!-- Row headers -->
-          <th v-for="cell in tr.head" :key="cell.__index" v-if="!cell.isRowspan" :rowspan="cell.rowspan" :colspan="cell.colspan">
+          <th v-for="cell in tr.head" v-if="!cell.isRowspan" :key="cell.__index" :rowspan="cell.rowspan" :colspan="cell.colspan">
             <div :style="{ 'min-height': _getMinHeightByRowCount(cell.rowspan) }">
               {{ cell.value }}
             </div>
@@ -80,8 +80,8 @@ export default {
       return { rows, columns, values, data }
     },
     rowPaths() {
-      const _paths = this._combinePaths(
-        ...this.localRows.map(({ values }) => values)
+      const _paths = this._combineRowPaths(
+        ...this.localRows.map(({ key, values }) => { return { key, values } })
       )
       return _paths
     },
@@ -90,7 +90,7 @@ export default {
       if (this.localValues.length) {
         keys.push(this.localValues.map(({ key }) => key))
       }
-      const _paths = this._combinePaths(...keys)
+      const _paths = this._combineColPaths(...keys)
       return _paths
     },
     // 列的表头
@@ -208,22 +208,34 @@ export default {
             const isLastCol = rowIndex === rowsLen - 1
             if (!isLastCol) {
               // 计算合并列数
-              let compareVal = 1
-              for (let i = rowIndex; i < rowsLen - 1; i++) {
-                compareVal *= (this.localRows[rowIndex + 1].values || []).length
+              // 过滤条件
+              const conditions = {}
+              for (let i = 0; i < rowIndex + 1; i++) {
+                conditions[i] = values[i] || ''
               }
+              const filterData = this.rowPaths.filter((data) => {
+                let status = true
+                const splitValues = data.split(this.Separator)
+                for (const key in conditions) {
+                  if (conditions[key] !== splitValues[key]) {
+                    status = false
+                    return
+                  }
+                }
+                return status
+              }) || []
+              const mergeSpans = filterData.length
               const currRowSpan = rowSpans[rowIndex] || {}
               const currRowSpanVal = (currRowSpan[currPath.join(this.Separator)] || 0) + 1
               currRowSpan[currPath.join(this.Separator)] = currRowSpanVal
               rowSpans[rowIndex] = currRowSpan
-              // 合并单元格
               if (currRowSpanVal === 1) {
                 return mergeBaseInfo({
                   __index: `${baseX}-${baseY}`,
                   value: currVal,
                   x: baseX,
                   y: baseY,
-                  rowspan: compareVal,
+                  rowspan: mergeSpans,
                   path: currPath.filter((item) => !!item)
                 })
               } else {
@@ -305,8 +317,7 @@ export default {
             Object.assign(cellData, { value: _value && _value.key ? this._reduceValue(filterData, _value.key) : '' })
           }
           return cellData
-        }
-        )
+        })
         return {
           __index: _data[0].x,
           data: _data
@@ -341,7 +352,7 @@ export default {
       this.localValues = JSON.parse(JSON.stringify(this.values))
       this.localData = Object.freeze(this.data)
     },
-    // set the `values` `merges` attribute to rows and columns
+    // set the `values` attribute to rows and columns
     setValuesToColAndRow() {
       const rowKeys = this.localRows.map(({ key }) => key)
       const columnKeys = this.localColumns.map(({ key }) => key)
@@ -383,11 +394,11 @@ export default {
     // 初始计算值
     handleCalcData() {
       if (!this.localValues.length) return
-      const _rowPaths = this._combinePaths(
-        ...this.localRows.map(({ values }) => values)
+      const _rowPaths = this._combineRowPaths(
+        ...this.localRows.map(({ key, values }) => { return { key, values } })
       )
       const _rowKeys = this.localRows.map(({ key }) => key)
-      const _colPaths = this._combinePaths(
+      const _colPaths = this._combineColPaths(
         ...this.localColumns.map(({ values }) => values)
       )
       const _colKeys = this.localColumns.map(({ key }) => key)
@@ -423,7 +434,44 @@ export default {
           .flat()
       )
     },
-    _combinePaths(...arrays) {
+    _combineRowPaths(...arrays) {
+      const len = arrays.length
+      let _result = []
+      if (len) {
+        const rowPaths = arrays.reduce((prev, curr) => {
+          const arr = []
+          prev.values.forEach(_prevEl => {
+            const prevKey = prev.key.split(SEPARATOR)
+            curr.values.forEach(_currEl => {
+              const currKey = curr.key
+              const conditions = {}
+              prevKey.forEach((key, i) => {
+                conditions[key] = _prevEl.split(SEPARATOR)[i]
+              })
+              conditions[currKey] = _currEl
+              // 判断数据里是否有该项
+              const filter = this.localData.some((data) => {
+                let status = true
+                for (const key in conditions) {
+                  if (conditions[key] !== data[key]) {
+                    status = false
+                    return
+                  }
+                }
+                return status
+              })
+              if (filter) {
+                arr.push(_prevEl + SEPARATOR + _currEl)
+              }
+            })
+          })
+          return { key: prev.key + SEPARATOR + curr.key, values: arr }
+        }) || {}
+        _result = rowPaths.values || []
+      }
+      return _result
+    },
+    _combineColPaths(...arrays) {
       return arrays.length ? arrays.reduce((prev, curr) => {
         const arr = []
         prev.forEach(_prevEl => {

datax-ui/src/utils/visual-chart.js

@@ -199,4 +199,54 @@ const chartTypes = [
   }
 ]
 
-export default chartTypes
+const chartOptions = {
+  // 标题组件
+  title: {
+    // 是否显示
+    show: true,
+    // 主标题文本
+    text: '',
+    // 副标题文本
+    subtext: '',
+    // 离左侧的距离
+    left: 0,
+    // 离上侧的距离
+    top: 0,
+    // 主标题样式
+    textStyle: {
+      // 主标题字体大小
+      fontSize: 18,
+      // 主标题文字的颜色
+      color: '#333'
+    },
+    // 副标题样式
+    subtextStyle: {
+      // 副标题字体大小
+      fontSize: 12,
+      // 副标题文字的颜色
+      color: '#aaa'
+    }
+  },
+  // 图例组件
+  legend: {
+    // 是否显示
+    show: true,
+    // 图例的类型 'plain':普通图例  'scroll':可滚动翻页的图例
+    type: 'plain',
+    // 离左侧的距离
+    left: 0,
+    // 离上侧的距离
+    top: 0,
+    // 列表的布局朝向(横竖,可选：'horizontal','vertical')
+    orient: 'horizontal'
+  },
+  // 提示框组件
+  tooltip: {
+    // 是否显示
+    show: true,
+    // 触发类型
+    trigger: 'item'
+  }
+}
+
+export { chartTypes, chartOptions }

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

@@ -105,10 +105,10 @@
           <div class="widget-right-pane-form">
             <el-form size="mini" label-position="top">
               <el-form-item label="图表名称">
-                <el-input v-model="dataChart.chartName" size="mini" :disabled="true" />
+                <el-input v-model="dataChart.chartName" :disabled="true" />
               </el-form-item>
               <el-form-item label="缩略图">
-                <el-button type="primary" size="mini" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
+                <el-button type="primary" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
                 <el-image :src="dataChart.chartThumbnail ? dataChart.chartThumbnail : ''">
                   <div slot="error" class="image-slot">
                     <i class="el-icon-picture-outline" />
@@ -128,7 +128,66 @@
           </div>
         </el-tab-pane>
         <el-tab-pane label="图表配置">
-          <div class="widget-right-pane-config">图表配置</div>
+          <div class="widget-right-pane-config">
+            <el-collapse v-model="collapsActiveNames" accordion>
+              <el-collapse-item title="标题组件" name="1">
+                <el-form size="mini">
+                  <el-form-item label="是否显示">
+                    <el-switch v-model="widget.options.title.show" active-text="开启" />
+                  </el-form-item>
+                  <el-form-item label="主标题文本">
+                    <el-input v-model="widget.options.title.text" />
+                  </el-form-item>
+                  <el-form-item label="副标题文本">
+                    <el-input v-model="widget.options.title.subtext" />
+                  </el-form-item>
+                  <el-form-item label="离左侧的距离">
+                    <el-slider v-model="widget.options.title.left" />
+                  </el-form-item>
+                  <el-form-item label="离上侧的距离">
+                    <el-slider v-model="widget.options.title.top" />
+                  </el-form-item>
+                  <el-form-item label="主标题字体大小">
+                    <el-input-number v-model="widget.options.title.textStyle.fontSize" :min="1" :max="30" />
+                  </el-form-item>
+                  <el-form-item label="主标题文字的颜色">
+                    <el-color-picker v-model="widget.options.title.textStyle.color" />
+                  </el-form-item>
+                  <el-form-item label="副标题字体大小">
+                    <el-input-number v-model="widget.options.title.subtextStyle.fontSize" :min="1" :max="20" />
+                  </el-form-item>
+                  <el-form-item label="副标题文字的颜色">
+                    <el-color-picker v-model="widget.options.title.subtextStyle.color" />
+                  </el-form-item>
+                </el-form>
+              </el-collapse-item>
+              <el-collapse-item title="图例组件" name="2">
+                <el-form size="mini">
+                  <el-form-item label="是否显示">
+                    <el-switch v-model="widget.options.legend.show" active-text="开启" />
+                  </el-form-item>
+                  <el-form-item label="图例的类型">
+                    <el-select v-model="widget.options.legend.type">
+                      <el-option label="普通图例" value="plain"></el-option>
+                      <el-option label="可滚动翻页的图例" value="scroll"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="离左侧的距离">
+                    <el-slider v-model="widget.options.legend.left" />
+                  </el-form-item>
+                  <el-form-item label="离上侧的距离">
+                    <el-slider v-model="widget.options.legend.top" />
+                  </el-form-item>
+                  <el-form-item label="列表的布局朝向">
+                    <el-select v-model="widget.options.legend.orient">
+                      <el-option label="横向" value="horizontal"></el-option>
+                      <el-option label="纵向" value="vertical"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -139,7 +198,7 @@
 import { getDataChart, buildDataChart, dataParser } from '@/api/visual/datachart'
 import { getDataSet, listDataSet } from '@/api/visual/dataset'
 import draggable from 'vuedraggable'
-import chartTypes from '@/utils/visual-chart'
+import { chartTypes, chartOptions } from '@/utils/visual-chart'
 import ChartPanel from './components/ChartPanel'
 import html2canvas from 'html2canvas'
 
@@ -160,8 +219,8 @@ export default {
         measures: [],
         // 后期添加条件过滤
         filters: [],
-        // 后期添加图表配置项
-        chartOptions: {}
+        // 图表配置项
+        options: chartOptions
       },
       dataSetOptions: [],
       dataSet: {},
@@ -173,7 +232,8 @@ export default {
         sql: ''
       },
       visible: false,
-      isCollapse: false
+      isCollapse: false,
+      collapsActiveNames: '1'
     }
   },
   created() {
@@ -511,6 +571,12 @@ export default {
       height: calc(100vh - 40px);
       overflow-x: hidden;
       overflow-y: auto;
+      .el-form-item__content {
+        .el-slider {
+          padding: 0 10px;
+          margin-top: 20px;
+        }
+      }
     }
   }
 }

datax-ui/src/views/visual/datachart/components/ChartPanel.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import chartTypes from '@/utils/visual-chart'
+import { chartTypes } from '@/utils/visual-chart'
 import ChartTable from './widgets/ChartTable'
 import ChartLine from './widgets/ChartLine'
 import ChartBar from './widgets/ChartBar'