DataOps-platform/frontend/src/charts/echartFull.vue

<template>
  <v-dialog v-model="dialogVisible" width="95%">
      <v-card max-height="80vh">
        <v-card-title>
          <v-btn icon absolute right @click="close" class="mt-5">
            <v-icon size="30">mdi-close</v-icon>
          </v-btn>
      </v-card-title>
        <div id="dialogBox" style="background-color: #fff;">
          <div v-if="sized" :id="domId"></div>
        </div>
      </v-card>
  </v-dialog>
</template>

<script>
import { generateUUID } from '@/utils'
export default {
  name: 'echartFull',
  data () {
    return {
      dialogVisible: false,
      title: '',
      sized: false,
      val: {},
      chart: {},
      domId: generateUUID()
    }
  },
  props: {
    data: {},
    yCategory: {}
  },
  watch: {
    sized: {
      handler (val, oldVal) {
        if (Object.keys(this.chart).length > 0 && !oldVal) {
          this.chart.dispose()
        }
        if (val) {
          this.$nextTick(() => {
            this.domId = generateUUID()
            this.getDom(this.val)
          })
        }
      }
    }
  },
  methods: {
    close () {
      this.dialogVisible = false
      this.sized = false
      this.chart.dispose()
      this.domId = generateUUID()
    },
    show (title, val) {
      this.$emit('fullscreen')
      this.dialogVisible = true
      this.title = title
      this.sized = true
      this.val = val
    },
    getDom (val) {
      const _this = this
      this.$nextTick(() => {
        const self = document.getElementById(_this.domId)
        this.chart = _this.$echarts.init(self)
        this.chart.setOption(val)

        // 图表大小自适应
        // window.addEventListener('resize', () => {
        //   this.chart.resize()
        // })
      })
      val.toolbox[0].feature.myTool.show = false
    }
  }
}
</script>

<style>
  #dialogBox>div {
    width: 95%;
    height: 72vh;
  }
</style>