<!--
 * @Author: gtz
 * @Date: 2021-11-22 19:03:01
 * @LastEditors: gtz
 * @LastEditTime: 2021-12-16 19:25:02
 * @Description: file content
 * @FilePath: \mt-qj-wms-ui\src\components\Charts\RingChart.vue
-->
<template>
  <div class="mod-demo-echarts">
    <div :id="'J_chartRingBox' + id" class="chart-box"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      id: {
        type: Number,
        default: 1
      },
      data: {
        type: Number,
        default: 0
      },
      name: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        chartRing: null
      }
    },
    mounted () {
      this.initChartRing()
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartRing) {
        this.chartRing.resize()
      }
    },
    methods: {
      // 折线图
      initChartRing () {
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{d}%'
          },
          series: [
            {
              type: 'pie',
              radius: ['55%', '90%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                },
                scale: false
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: this.data,
                  name: this.name,
                  itemStyle: {
                    normal: {
                      color: '#5A55D8'
                    }
                  }
                },
                {
                  value: (100 - this.data),
                  name: '其他',
                  itemStyle: {
                    normal: {
                      color: 'rgba(231, 231, 231, 1)'
                    }
                  }
                }
              ]
            }
          ]
        }
        this.chartRing = echarts.init(document.getElementById('J_chartRingBox' + this.id))
        this.chartRing.setOption(option)
        window.addEventListener('resize', () => {
          this.chartRing.resize()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 120px;
    }
  }
</style>
