增加条形图、曲线图、柱状图表显示

vue/src/components/basic/query/display-chart-bar.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="echart" :id="('chart-'+id)" :style="chartStyle"></div>
+</template>
+
+<script lang="ts">
+  import {defineComponent, computed} from 'vue';
+  import * as echarts from "echarts";
+
+  export  default defineComponent ({
+    props:{
+      bases : [] as any,
+      measures : [] as any,
+      wheres : [] as any
+    },
+    name : 'DisplayChartBar',
+    data() {
+      return{
+        dataList : [] as any,
+        loading : false,
+        chartStyle: { width: "100%", height: "400px" },
+        chart : null as any,
+        serieType : 'bar',
+        id : Date.now()
+      }
+    },
+    setup(props, context){
+      console.log("DisplayChart setup" , props, context);
+
+      const bases = computed(() => {
+        console.log("props.bases", props.bases)
+        return props.bases ? props.bases : []
+      });
+      const measures = computed(() => {
+        return props.measures ? props.measures : []
+      });
+      const wheres = computed(() => {
+        return props.wheres ? props.wheres : []
+      });
+
+      return{
+        bases, measures, wheres
+      }
+    },
+    mounted(){
+      this.id
+      console.log("mounted" , "");
+    },
+    methods:{
+      getxAxis:function (){
+        let xAxis = { type : 'category', data : [] as any, axisTick: { alignWithLabel: true }};
+        if(this.bases.length==0 || this.dataList.length==0) return xAxis;
+        for(let i=0;i<this.dataList.length;i++){
+          let arys = [] as any;
+          for(let n=0;n<this.bases.length;n++){
+            let colName = "RENAME"+n;
+            if(this.dataList[i][colName]) arys.push(this.dataList[i][colName]);
+          }
+          xAxis.data.push(arys.join(' '));
+        }
+        console.log("getxAxis", xAxis);
+        return xAxis;
+      },
+      getyAxis:function (){
+        return { type: 'value'};
+      },
+      getAxis:function (xy){
+        if(xy=="x") return this.getxAxis();
+        else if(xy=="y") return this.getyAxis();
+      },
+      getSeries:function (){
+        let series = [] as any;
+        if(this.measures.length==0 || this.dataList.length==0) return series;
+
+        series.slice(0,1);
+        for(let i=0;i<this.measures.length;i++) {
+          const colName = "RENAME"+(i+this.bases.length);
+          const it = this.measures[i];
+          let col = {name: (it.displayName?it.displayName:it.fieldName), type: this.serieType, data:[] as any};
+          for(let n=0;n<this.dataList.length;n++){
+            const data = this.dataList[n];
+            col.data.push(data[colName]?data[colName]:0);
+          }
+          series.push(col);
+        }
+        console.log("getSeries", series);
+        return series;
+      },
+      getLegends:function (){
+        let legend = {data:[] as any};
+        for(let i=0;i<this.measures.length;i++) {
+          const it = this.measures[i];
+          legend.data.push((it.displayName?it.displayName:it.fieldName));
+        }
+        console.log("getLegends", legend);
+        return legend;
+      },
+      setData : function (result){
+        console.log(result);
+        if(result["code"]!=0) this.dataList = [];
+        else{
+          this.dataList = result["rows"];
+          this.loading = false;
+        }
+        this.readerChart();
+      },
+      reader:function (){
+        this.dataList = [];
+        this.readerChart();
+      },
+      readerChart: function () {
+        const option = {
+          tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
+          toolbox: { show: true, feature: { saveAsImage: {} }},
+          grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
+          legend : this.getLegends(),
+          xAxis: this.getAxis("x"),
+          yAxis: this.getAxis("y"),
+          series: this.getSeries()
+        };
+        console.log("readerChart-"+this.serieType,option);
+        if(this.chart==null)
+          this.chart = echarts.init(document.getElementById('chart-'+this.id) as HTMLElement);
+        if(this.chart!=null) {
+          this.chart.setOption(option);
+          this.chart.resize();
+        }
+      },
+      resize: function (){
+        if(this.chart!=null) this.chart.resize();
+      }
+    }
+  })
+</script>
+
+<style lang="less" scoped></style>

vue/src/components/basic/query/display-chart-line.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import DisplayChartBar from './display-chart-bar.vue'
+
+  export default {
+    name : 'DisplayChartLine',
+    extends : DisplayChartBar,
+    data(){
+      return{
+        dataList : [] as any,
+        loading : false,
+        chartStyle: { width: "100%", height: "400px" },
+        chart : null as any,
+        serieType : 'line',
+        id : Date.now()
+      }
+    },
+    methods:{
+
+    }
+  }
+</script>
+<style lang="less" scoped>
+  @import 'drag-base.less';
+</style>

vue/src/components/basic/query/display-chart-ybar.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import DisplayChartBar from './display-chart-bar.vue'
+
+  export default {
+    name : 'DisplayChartYbar',
+    extends : DisplayChartBar,
+    data(){
+      return{
+        dataList : [] as any,
+        loading : false,
+        chartStyle: { width: "100%", height: "600px" },
+        chart : null as any,
+        serieType : 'bar',
+        id : Date.now()
+      }
+    },
+    methods:{
+      getAxis:function (xy){
+        if(xy=="y") return this["getxAxis"]();
+        else if(xy=="x") return this["getyAxis"]();
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  @import 'drag-base.less';
+</style>

vue/src/views/query/index.vue

@@ -103,7 +103,20 @@
         </a-form>
       </div>
       <div class="query-index-table">
-        <DisplayTable ref="display" :bases="formState.bases" :measures="formState.measures" @displayChange="onDisplayChange"></DisplayTable>
+        <a-tabs v-model:activeKey="activeTab" class="query-index-tabs" @change="tabChange">
+          <a-tab-pane key="1" tab="列表视图">
+            <DisplayTable ref="display" :bases="formState.bases" :measures="formState.measures" @displayChange="onDisplayChange"></DisplayTable>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="柱状图" forceRender="true" style="width: 100%;">
+            <DisplayChartBar ref="displayChartBar" :bases="formState.bases" :measures="formState.measures"></DisplayChartBar>
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="曲线图" forceRender="true" style="width: 100%;">
+            <DisplayChartLine ref="displayChartLine" :bases="formState.bases" :measures="formState.measures"></DisplayChartLine>
+          </a-tab-pane>
+          <a-tab-pane key="4" tab="条形图" forceRender="true" style="width: 100%;">
+            <DisplayChartYbar ref="displayChartYbar" :bases="formState.bases" :measures="formState.measures"></DisplayChartYbar>
+          </a-tab-pane>
+        </a-tabs>
       </div>
     </div>
   </div>
@@ -123,12 +136,16 @@ import DragWhere from '@/components/basic/query/drag-where.vue'
 import DragBase from '@/components/basic/query/drag-base.vue'
 import DragMeasure from '@/components/basic/query/drag-measure.vue'
 import DisplayTable from '@/components/basic/query/display-table.vue'
+import DisplayChartBar from '@/components/basic/query/display-chart-bar.vue'
+import DisplayChartYbar from '@/components/basic/query/display-chart-ybar.vue'
+import DisplayChartLine from '@/components/basic/query/display-chart-line.vue'
 import {save, get} from "@/api/common";
 import type { TreeProps } from 'ant-design-vue';
 
 export default defineComponent({
   name: 'queryindex',
-  components: {DragWhere, DragBase, DragMeasure, DisplayTable},
+  components: {DragWhere, DragBase, DragMeasure,DisplayTable,
+    DisplayChartBar, DisplayChartLine, DisplayChartYbar},
   setup() {
     const route = useRoute();
     const expand = ref(false);
@@ -137,7 +154,11 @@ export default defineComponent({
     const base = ref<typeof DragBase>();
     const where = ref<typeof DragWhere>();
     const display = ref<typeof DisplayTable>();
+    const displayChartBar = ref<typeof DisplayChartBar>();
+    const displayChartLine = ref<typeof DisplayChartLine>();
+    const displayChartYbar = ref<typeof DisplayChartYbar>();
 
+    const activeTab = ref('1');
     const subjectTrees = ref({
       data :[] as TreeProps['treeData'],
       expandedKeys : [''],
@@ -167,6 +188,25 @@ export default defineComponent({
       sqlString : null
     });
 
+    const tabChange = (key) => {
+      console.log("tabChange", key);
+      if(key=="2") {
+        setTimeout(function (){
+          (displayChartBar.value as any).resize();
+        }, 100);
+      }
+      if(key=="3") {
+        setTimeout(function (){
+          (displayChartLine.value as any).resize();
+        }, 100);
+      }
+      if(key=="4") {
+        setTimeout(function (){
+          (displayChartYbar.value as any).resize();
+        }, 100);
+      }
+    }
+
     const onFinish = () => {
       if(formRef.value == undefined){
         return;
@@ -198,6 +238,9 @@ export default defineComponent({
         }
         //将数据给视图，视图组装并显示
         (display.value as any).setData(result);
+        (displayChartBar.value as any).setData(result);
+        (displayChartLine.value as any).setData(result);
+        (displayChartYbar.value as any).setData(result);
       });
     }
 
@@ -266,8 +309,11 @@ export default defineComponent({
 
     function displayReader(){
       //初始化视图显示
-      console.log("displayReader",display.value);
+      console.log("displayReader",display.value, displayChartBar.value);
       (display.value as any).reader();
+      (displayChartBar.value as any).reader();
+      (displayChartLine.value as any).reader();
+      (displayChartYbar.value as any).reader();
     }
 
     const checkSubjectId = (obj)=>{
@@ -295,7 +341,12 @@ export default defineComponent({
       measure,
       where,
       base,
+      activeTab,
       display,
+      displayChartBar,
+      displayChartLine,
+      displayChartYbar,
+      tabChange,
       onChangeMeasure,
       onChangeWhere,
       onChangeBase,
@@ -355,6 +406,11 @@ export default defineComponent({
   .query-index-table{
     flex-grow: 1;
   }
+  .query-index-tabs{
+    margin-left: 10px;
+    margin-right: 10px;
+    height: 100%;
+  }
   .tabs-view-content{
     padding: 0px;
   }