柱状图

src/components/base/dk-perspective/dk-pivot.vue

@@ -102,13 +102,14 @@
           </div>
         </DkSplit>
         <div style="height: 50px">
-          <DkButton @click="currentType=1">表格</DkButton>
-          <DkButton @click="currentType=2">柱状图</DkButton>
-          <DkButton @click="currentType=3">折线图</DkButton>
+          <DkButton @click="currentType='table'">表格</DkButton>
+          <DkButton @click="currentType='bar'">柱状图</DkButton>
+<!--          <DkButton @click="currentType='line'">折线图</DkButton>-->
+<!--          <DkButton @click="currentType='pie'">饼状图</DkButton>-->
         </div>
       </div>
 
-      <DkTable slot="right" v-show="currentType===1"
+      <DkTable slot="right" v-show="currentType==='table'"
                :id="'table-'+$options.name" ref="table-select" :data="tableData"
                :height="tableHeight"
                :choose-flag="false"
@@ -212,7 +213,7 @@
         </div>
 
       </DkTable>
-      <Echarts class="123112sdfsdf" slot="right" v-if="currentType!==1" :type="currentType"
+      <Echarts slot="right" v-if="currentType!='table'" :type="currentType" :columns="internal"
                :style="'height: '+tableHeight+'px; width: 100%'" :table-instance="$refs['table-select']"/>
     </DkSplit>
   </div>
@@ -321,7 +322,7 @@ export default {
       rowKeys: [],// 行列
       isDataLoading: false,
       reducer: (sum, item) => sum + 1,
-      currentType: 1
+      currentType: 'table'
     }
   },
   computed: {

src/components/base/dk-perspective/echarts.vue

@@ -1,86 +1,147 @@
 <template>
-  <div id="chart">
+  <div :id="id">
   </div>
 </template>
 
 <script>
+import { uuid } from '@tinymce/tinymce-vue/lib/es2015/main/ts/Utils'
+
 export default {
   // name: 'echarts',
   props: {
     type: {
-      type: Number
+      type: String
     },
     tableInstance: {
       type: Object
+    },
+    columns: {
+      type: Object
     }
   },
   data() {
     return {
-      xCol: [],
-      yCol: []
+      id: uuid('chart'),
+    }
+  },
+  watch: {
+    type(){
+      this[this.type]()
     }
   },
   methods: {
-    drawBar() {
-      let col = this.tableInstance.$refs.table.getColumns().map(m => m.field).filter(f => f)
+    /**
+     * @desc   : 获取列信息
+     * @author : 洪旭东
+     * @date   : 2023-04-14 15:36
+     */
+    getColumn () {
+      //表格全部列
+      let colList = this.tableInstance.$refs.table.getColumns()
+      //去除行号列
+      colList.splice(0, 1)
+      return colList
+    },
+    /**
+     * @desc   : 柱状图
+     * @author : 洪旭东
+     * @date   : 2023-04-14 16:46
+     */
+    bar() {
       let tableData = this.tableInstance.$refs.table.getTableData().tableData
+      //表格全部列
+      let colList = this.getColumn()
+      //行
+      let xCol = colList.filter(f => this.columns.rowFieldKeys.indexOf(f.field)!==-1)[0]
+      //把行的列过滤掉，只保留值的列
+      let data = colList.filter(f => this.columns.rowFieldKeys.indexOf(f.field)===-1).map(c => {
+        return {
+          name: c.title,
+          data: tableData.map(m => m[c.field]),
+          type: 'bar',
+          showBackground: true,
+        }
+      })
 
       let echarts = require('echarts')
-      let bar = echarts.init(document.getElementById('chart'))
-      bar.setOption(
+      let chart = echarts.init(document.getElementById(this.id))
+      chart.setOption(
         {
-        //   legend: {},
-        //   tooltip: {},
-        //   dataset: {
-        //     source: [
-        //       ['', '2015', '2016', '2017'],
-        //       ['Matcha Latte', 43.3, 85.8, 93.7],
-        //       ['Milk Tea', 83.1, 73.4, 55.1],
-        //       ['Cheese Cocoa', 86.4, 65.2, 82.5],
-        //       ['Walnut Brownie', 72.4, 53.9, 39.1]
-        //     ]
-        //   },
-        //   xAxis: { type: 'category' },
-        //   yAxis: {},
-        //   series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
-        // }
-
-
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'shadow'
             }
           },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
+          xAxis: {
+            type: 'category',
+            data: tableData.map(m => m[xCol.field] || 0)
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: data
+        }
+      )
+    },
+    line() {
+      let tableData = this.tableInstance.$refs.table.getTableData().tableData
+      //表格全部列
+      let colList = this.getColumn()
+      //行
+      let xCol = colList.filter(f => this.columns.rowFieldKeys.indexOf(f.field)!==-1)[0]
+      //把行的列过滤掉，只保留值的列
+      let data = colList.filter(f => this.columns.rowFieldKeys.indexOf(f.field)===-1).map(c => {
+        return {
+          name: c.title,
+          data: tableData.map(m => m[c.field] || 0),
+          type: 'line',
+          showBackground: true,
+        }
+      })
+
+      let echarts = require('echarts')
+      let chart = echarts.init(document.getElementById(this.id))
+      chart.setOption(
+        {
+          tooltip: {
+            trigger: 'item'
           },
           xAxis: {
             type: 'category',
-            data: tableData.map(m => m[col[0]])
+            data: tableData.map(m => m[xCol.field])
           },
           yAxis: {
             type: 'value',
             boundaryGap: [0, 0.01],
           },
+          series: data
+        }
+      )
+    },
+    pie() {
+      let _this = this
+      let col = this.tableInstance.$refs.table.getColumns().map(m => m.field).filter(f => f)
+      let tableData = this.tableInstance.$refs.table.getTableData().tableData
+
+      let echarts = require('echarts')
+      let chart = echarts.init(document.getElementById(this.id))
+      chart.setOption(
+        {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
           series: [
             {
-              type: 'bar',
-              data: tableData.map(m => m[col[1]]),
-              barCategoryGap: 8,
-              itemStyle: {
-                normal: {
-                  //这里是重点
-                  color: function (params) {
-                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
-                    let colorList = ['#e58dc2', '#fbb8a1', '#fbe289', '#90e5e7', '#6fbae1', '#749f83', '#ca8622']
-                    return colorList[params.dataIndex]
-                  }
-                }
-              }
+              type: this.type,
+              data: tableData.map(m => {return {
+                value: m[col[1]],
+                name: m[col[0]]
+              }}),
             }
           ]
         }
@@ -88,8 +149,7 @@ export default {
     },
   },
   mounted() {
-    console.log('mounted', this.tableInstance.$refs.table.getColumns())
-    this.drawBar()
+    this[this.type]()
   }
 }
 </script>