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

<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(){
      console.log("mounted" ,this.id);
    },
    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"+this.bases[n].disOrder;
            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 it = this.measures[i];
          const colName = "RENAME"+it.disOrder;
          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);
          let sender=this.chart;
          setTimeout(function () {
            sender.resize();
          }, 100);
        }
      },
      resize: function (){
        if(this.chart!=null) this.chart.resize();
      }
    }
  })
</script>

<style lang="less" scoped></style>