<!--
 * @Author: your name
 * @Date: 2021-10-18 10:50:29
 * @LastEditTime: 2021-11-02 15:46:16
 * @LastEditors: Please set LastEditors
 * @Description: 圆形进度
 * @FilePath: \Foshan4A\src\layout\components\Echarts\commonChartsPro.vue
-->
<template>
  <div class="management_chart">
    <div class="echarts">
      <div class="ChartsPro" :id="id"></div>
      <div @click="checkType" :style="{ 'background-color': background,'color': color }" class="coll">{{number}}</div>
    </div>
    <p>{{name}}</p>
  </div>
</template>

<script>
// 柱状图初始数据
import ChartsPro from '../../mixin/commonChartsPro'
export default {
  name: 'ChartsPro',
  props: {
    // 柱状图生成所需id
    id: {
      type: String,
      default: ''
    },
    // 柱状图额外的数据
    option: {
      type: Object,
      default: () => { }
    },
    // name
    name: {
      type: String,
      default: ''
    },
    // number
    number: {
      type: Number,
      default: 0
    },
    // background
    background: {
      type: String,
      default: ''
    },
    // color
    color: {
      type: String,
      default: ''
    }
  },
  mixins: [ChartsPro],
  data () {
    return {
      myChart: null, //柱状图实例
      desc: 300 // 防抖时间
    }
  },
  mounted () {
    // 生成图形
    this.initEcharts()
    // 监听页面缩放 防止dom重复渲染
    window.addEventListener('resize', _.debounce(this.handle, this.desc))
  },
  beforeDestroy () {
    // 销毁实例和移除监听
    if (this.myChart) {
      this.myChart.dispose()
      window.removeEventListener('resize', this.handle)
      this.myChart = null
    }
  },
  watch: {
    // 监听数据变化 重绘图形
    option: {
      handler (obj) {
        // 初始数据和额外的配置数据耦合
        const objData = _.merge(this.options, obj)
        // 生成柱状图
        this.myChart.setOption(objData)
      },
      deep: true
    }
  },
  methods: {
    /**
     * @description: 图形缩放
     * @param {*}
     * @return {*}
     */
    handle () {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    /**
     * @description: 初始化echarts
     * @param {*}
     * @return {*}
     */
    initEcharts () {
      // 初始数据和额外的配置数据耦合
      const objData = _.merge(this.options, this.option)
      // dom
      const chartDom = document.getElementById(this.id)
      // 初始化
      this.myChart = this.$echarts.init(chartDom)
      // 生成柱状图
      this.myChart.setOption(objData)
      // 事件
      this.myChart.on('click', params => {
        this.$emit('getChartData', params)
      })
    },
    /**
     * @description: 圆中心点击事件
     * @param {*}
     * @return {*}
     */
    checkType () {
      const params = {
        name: this.name,
        value: this.number,
        color: this.color,
        background: this.background
      }
      this.$emit('getTypeData', params)
    }
  }
}
</script>

<style lang="scss" scoped>
.management_chart {
  width: 50%;
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  float: left;
  margin-top: 31px;
  // padding-top: 41px;
  > .echarts {
    min-width: 120px;
    min-height: 120px;
    position: relative;
    .ChartsPro {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    > .coll {
      position: absolute;
      left: 0;
      right: 0;
      cursor: pointer;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: 50%;
      width: 76px;
      height: 76px;
      background: #e5f6fa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      font-family: DIN;
      font-weight: bold;
      color: #303133;
    }
  }
  > p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #606266;
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>