<template>
<div style="width:100%;height:100%;">
      <div :id="elId"  :style='initStyle' class="innerStyle"></div>
</div>

</template>
<script>
import uuidv1 from 'uuid/v1'
export default {
  name: 'commonEchart',
  props: {
    height: {// 图表高度
      type: String,
      default: '400px'
    },
    width: {// 图表宽度
      type: String,
      default: '100%'
    },
    setOptions: {
      type: Object,
      default() {
        return {}
      }
    },
    initStyle: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  watch: {
    setOptions: {
      handler: function(newVal, oldVal) {
        this.drowEchart(newVal)
      },
      deep: true
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  data() {
    return {
      elId: '',
      chart: null,
      jsoneditorVisible: false,
      jsoneditorConfig: {},
      jsoneditorSource: [],
      newJson: {}
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },

  mounted() {
    this.drowEchart(this.setOptions)
    // 如果说路由参数上有isMock 那我们就从static 去读取模拟数据
    const { isMock } = this.$route.query
    if (isMock) {
      this.get_echart_config()
    }
  },
  methods: {
    drowEchart(data) {
      const copyData = JSON.parse(JSON.stringify(data))
      this.newJson = copyData
      this.draw_complate_options(copyData)
    },
    // 传入完整的配置
    draw_complate_options(options) {
      if (this.chart) {
        this.chart.setOption(options, true)
        return
      }
      this.chart = this.$drawEcharts(this.elId, options)
    }

  }
}
</script>
<style scoped>
.innerStyle{
  width: 100%;
  height: 400px;
}
</style>
