<!--
 * @Author: your name
 * @Date: 2021-09-23 11:16:14
 * @LastEditTime: 2021-09-23 16:51:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigDataScreen\src\components\Echarts\commonChartsChinaMap.vue
-->
<template>
  <div style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;" class="ChartsChinaMap" :id="id"></div>
</template>

<script>
// 饼图初始数据
import ChartsChinaMap from '../mixin/commonChartsChinaMap'
import { markRaw } from "vue"
import * as _ from 'lodash'
import * as echarts from "echarts";
export default {
  name: 'ChartsChinaMap',
  props: {
    // 饼图生成所需id
    id: {
      type: String,
      default: ''
    },
    // 饼图额外的数据
    option: {
      type: Object,
      default: () => { }
    }
  },
  mixins: [ChartsChinaMap],
  data () {
    return {
      myChart: null, //饼图实例
      desc: 300 // 防抖时间
    }
  },
  watch: {
    // 监听数据变化，重绘折线图
    option: {
      deep: true,
      handler (newVal) {
        const chartDom = document.getElementById(this.id);
        // 先移除之前的实例，保证重绘的流畅性
        chartDom.removeAttribute("_echarts_instance_");
        this.myChart = markRaw(echarts.init(chartDom));
        this.myChart.setOption(_.cloneDeep(newVal));
      },
    },
  },
  mounted () {
    // 初始数据和额外的配置数据耦合
    const objData = _.merge(this.options, this.option)
    // 饼图dom
    const chartDom = document.getElementById(this.id)
    // 饼图初始化
    this.myChart = markRaw(echarts.init(chartDom))
    // 生成饼图
    this.myChart.setOption(objData)
    // 监听页面缩放 防止dom重复渲染
    window.addEventListener('resize', _.debounce(this.handle, this.desc))
  },
  destroyed () {
    // 销毁实例和移除监听
    this.myChart.dispose();
    window.removeEventListener('resize', this.handle);
  },
  methods: {
    /**
     * @description: 图形缩放
     * @param {*}
     * @return {*}
     */
    handle () {
      this.myChart.resize()
    }
  }
}
</script>

