AnalysisSystemForRadionuclide_vue/src/components/CustomChart/index.vue

<template>
  <div class="custom-chart" ref="containerRef" :style="{ height: height + 'px' }"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    height: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.chart = echarts.init(this.$refs.containerRef)
    this.chart.setOption(this.option)
  },
  watch : {
    option: {
      handler() {
        if(this.chart) {
          this.chart.clear()
          this.chart.setOption(this.option)
        }
      },
      deep: true
    },
    height() {
      this.$nextTick(() => {
        this.chart && this.chart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.custom-chart {
  height: 100%;
}
</style>