/**
*  @Author      LiuShaolong
*  @Description
*  @CreateDate  2020/10/13
*/
<template>
  <el-dialog :visible="show" :title="title" width="1000px" :close-on-click-modal="false"
             :close-on-press-escape="false" @close="close">
    <div v-if="show" ref="chart" style="height: 600px"></div>
    <div slot="footer">
      <el-button type="primary" @click="print">打印</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>

  export default {
    name: 'ZyCharts',
    components: {},
    props: ['show', 'title', 'option'],
    data() {
      return {
        chart: '',
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {
      option: {
        handler: function (nv) {
          this.chart = this.$echarts.init(this.$refs.chart);
          this.chart.setOption(nv);
        }
      }
    },
    computed: {},
    methods: {
      close() {
        this.$emit('close')
      },
      print() {
        let data = this.chart.getDataURL();
        let div = document.createElement('div');
        let img = document.createElement('img');
        img.setAttribute('src', data);
        div.appendChild(img);
        document.getElementById('print').innerHTML = div.innerHTML;
        this.$nextTick(() => window.print())
      }
    },
  }
</script>
<style scoped lang="scss">

</style>