xiaoshi_system/src/views/analyse/custom/components/Charts/index.vue

<template>
  <div v-if="refresh">
    <component :is="chartType.component" :width="width" :height="height"></component>
  </div>
</template>

<script>
import { customPage } from "../../mixins";

export default {
  mixins: [customPage],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    form: Object
  },
  data() {
    return {
      refresh: false,
      chartType: {},
    }
  },
  mounted() {
    this.refreshChart()
  },
  methods: {
    initData() {
      if (!this.form.setting.type) {
        return false
      }
      this.chartType = this.$constants.chartType.find(item => item.value === this.form.setting.type)
      if (this.chartType.type === 1 && this.form.schema.y.field) {
        return false
      }
      this.$store.commit('SET_MY_CHART', null)
      return true
    },
    refreshChart() {
      this.refresh = false
      const ret = this.initData()
      this.$nextTick(() => {
        this.refresh = ret
      })
    },
  }
}
</script>

<style lang="less">

</style>