dx-element-ui/packages/charts/src/ntExtendCharts.vue

<template>
  <div :class="[className, chartsId]" style="height: 100%"></div>
</template>

<script>
  import echarts from 'echarts/lib/echarts'
  import { chartsInitData, chartsInitBAutoResize, chartsDestroyData, drawCharts } from './echart'

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      chartsId: {
        type: String,
        default: 'chart'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      type: {
        type: String,
        default: 'bar'
      },
      options: {
        type: Object,
        default: () => {}
      },
      chartData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return chartsInitData(this.type);
    },
    mounted() {
      this.initChart();
    },
    beforeDestroy() {
      chartsDestroyData(this);
    },
    watch: {
      chartData: {
        deep: true,
        handler() {
          this.initChart()
        }
      }
    },
    methods: {
      initChart() {
        // console.log(this)
        if(!this.chart){
          this.chart = echarts.init(this.$el, this.className);
          chartsInitBAutoResize(this);
        }
        drawCharts(this);
      }
    }
  }
</script>