解决echart图表不显示的问题，为图表添加点击事件，销毁图表

使用echart图表时，代码基本正确但图表却一直无法显示，记得设置最小高度

<template>
  <div class="container">
    <my-loading v-if="showLoading" />
    <div class="chartA"
         ref="chart"
         v-else></div>
  </div>
</template>
<script>
import myLoading from './components/myLoading'
export default {
  components: {
    myLoading
  },
  data () {
    return {
      myChart: null,
      showLoading: false,
      loadingStatus: 0
    }
  },
  watch: {}, // 如果是动态数据，则把initChart放在watch监听里，有数据时再初始化图表
  mounted () {
    this.initChart({ 'name': '1' })
  },
  methods: {
    initChart (params) {
      this.$nextTick(() => {
        this.myChart && this.myChart.dispose() // 如果存在图表实例，则先销毁
        let myChart = this.$refs.chart
        this.myChart = this.$echarts.init(myChart) // 初始化图表
        let option = this.getOption(params)
        this.myChart.setOption(option, true)
        this.myChart.on('click', this.clickFun) // 为图表添加自定义点击事件
      })
    },
    getOption (data) {
      // 自定义图表
    },
    clickFun (param) {
      if (param?.value) { }
    }
  }
}
</script>
<style lang="less" scoped>
.chartA {
  min-height: 300px; // 设置最小高度
  background-size: contain;
}
</style>

最后，原创不易，如本文对您有所帮助，麻烦点赞收藏一下谢谢！