smartsearch/vue/src/components/basic/chart/chart-cell.vue

<template>
  <a-popover trigger="hover"
             placement="left"
             @visibleChange="onOpenChange">
    <template #content>
      <div class="echart" :id="('popover-'+id)" :style="chartStylePopover"></div>
    </template>
    <div class="echart" :id="('chart-'+id)" :style="chartStyle"></div>
  </a-popover>
</template>

<script lang="ts">
  import {defineComponent, computed, markRaw} from 'vue';
  import * as echarts from "echarts";

  export  default defineComponent ({
    props:{
      datas : [] as any
    },
    name : 'ChartCell',
    data() {
      return{
        loading : false,
        chartStyle: { width: "100%", height: "100%" },
        chartStylePopover: { width: "460px", height: "300px" },
        cell : null as any,
        chart : null as any,
        serieType : 'line',
        id : Date.now(),
        hovered : false
      }
    },
    setup(props, context){
      console.log("ChartCell setup" , props, context);

      const datas = computed(() => {
        return props.datas ? props.datas : []
      });

      return{
        datas
      }
    },
    mounted(){
      console.log("mounted" , this.id);
      this.readerCell();
      //this.readerChart();
    },
    methods:{
      getxAxis:function (show){
        let xAxis = {type : 'category', data : [] as any, show : show, axisLabel:{rotate:50}};
        //数据组装，这里根据业务组装x轴数据
        xAxis.data = ['2023年1月', '2023年2月', '2023年3月', '2023年4月', '2023年5月', '2023年6月',
          '2023年7月', '2023年8月', '2023年9月', '2023年10月', '2023年11月', '2023年12月'];
        return xAxis;
      },
      getyAxis:function (){
        return {type: 'value', min:'dataMin', max:'dataMax', show:false };
      },
      getSeries:function (showSymbol){
        let series = [{type: this.serieType, data:[] as any, showSymbol:showSymbol}];
        //数据组装，这里根据业务组装y轴数据
        series[0].data = [820, 932, 901, 934, 1290, 1330,
        2000, 3000, 4000, 5000, 5000, 6000];
        console.log("getSeries", series);
        return series;
      },
      readerCell: function () {
        const option = {
          grid: { top: 0, left: 0, right: 0, bottom: 0, containLabel: false },
          xAxis: this.getxAxis(false),
          yAxis: this.getyAxis(),
          series: this.getSeries(false)
        };
        console.log("readerCell-"+this.serieType,option);

        if(this.cell==null)
          this.cell = markRaw(echarts.init(document.getElementById('chart-'+this.id) as HTMLElement));
        if(this.cell!=null) {
          this.cell.setOption(option);
          this.cell.resize();
        }
      },
      readerChart: function () {
        let xAxis = this.getxAxis(true);
        xAxis['nameRotate'] = 0;
        const option = {
          title: { left: 'center', text: '累产量趋势图' },
          tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
          grid: { top:'15%', left: '8%', right: '3%', bottom: '6%', containLabel: true },
          xAxis: xAxis,
          yAxis: { name:'累产量', nameGap: 50, nameLocation:'center', type: 'value'},
          series: this.getSeries(true)
        };
        console.log("readerChart-"+this.serieType,option);

        if(this.chart==null)
          this.chart = markRaw(echarts.init(document.getElementById('popover-'+this.id) as HTMLElement));
        if(this.chart!=null) {
          this.chart.setOption(option);
          this.chart.resize();
        }
      },
      onOpenChange:function(visible){
        console.log("onOpenChange", visible);
        if(visible) {
          setTimeout(this.readerChart, 100);
        }
        else{
          this.chart.dispose();
          this.chart = null;
        }
      }
    }
  })
</script>

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