<!--
  @description: 报表统计-百分比图表
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/30
-->
<template>
  <div
    :style="{width: '100%', height: height}"
  >
    <MyEcharts
      :id="id"
      class="echart-dom"
      :option="chartOption"
    />
  </div>
</template>

<script>
/* 公用方法*/
import { randomData } from '@assets/js/utils'// 常用方法
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue' // 图表
export default {
  name: 'GaugeChart',
  inject: ['chartData'],
  components: {
    MyEcharts// 图表
  },
  props: {
    // 组件高度
    height: {
      type: String,
      default: '100%'
    },
    // 自定义参数设置
    optionData: {
      type: Object,
      default: () => {
        return {
          series: {
            axisLine: {
              width: ''
            },
            detail: {
              fontSize: ''
            }
          },
          value: '', // 占比
          yuanLineColor: ''// 进度颜色
        }
      }
    },
    // 参数设置
    option: {
      type: Object,
      default: () => {
        return {
          yuanLineColor: ''// 进度颜色
        }
      }
    }
  },
  data() {
    return {
      id: 'gaugeChart' + randomData(),
      // 图表配置
      chartOption: {}
    }
  },
  watch: {
    // 要监听的对象 optionData
    // 由于echarts采用的数据驱动，所以需要监听数据的变化来重绘图表
    optionData: {
      handler(newVal, oldVal) {
        this.init()
      },
      deep: true // 对象内部属性的监听，关键。
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const yuanLineColor = this.optionData.yuanLineColor || 'auto' // 进度颜色
      const yuanLineBg = 'rgba(255,255,255,0.2)' // 背景颜色
      const textColor = this.chartData.textColor // 文本颜色
      this.chartOption = {
        title: {
          text: this.optionData.title ? this.optionData.title.text : '',
          textStyle: {
            fontSize: 14,
            fontweight: 'normal',
            color: textColor
          }
        },
        series: [{
          type: 'gauge',
          radius:	(this.optionData.series && String(this.optionData.series.radius)) || '80%',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },

          itemStyle: {
            color: yuanLineColor
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 0
            }
          },
          // 仪表盘样式
          axisLine: {
            lineStyle: {
              color: [
                [1, yuanLineBg]
              ],
              width: this.optionData.series && this.optionData.series.axisLine && String(this.optionData.series.axisLine.width) || 10
            }
          },
          // 隐藏刻度
          splitLine: {
            show: false
          },
          // 隐藏小刻度
          axisTick: {
            show: false
          },
          // 隐藏大刻度
          axisLabel: {
            show: false
          },
          title: {
            show: false
          },
          data: [
            {
              value: this.optionData.value,
              name: ''
            }
          ],
          detail: {
            fontSize: (this.optionData.series && this.optionData.series.detail && String(this.optionData.series.detail.fontSize)) || 14,
            offsetCenter: [0, '0%'],
            color: yuanLineColor,
            formatter: '{value}%'
          }
        }]
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
