<template>
  <div class="main">
    <div
      class="chart"
      ref="chart"
    >
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    pie: {
      type: Number,
      default: ''
    },
    startColor: {
      type: String,
      default: '#0269D8'
    },
    endColor: {
      type: String,
      default: '#7CC6F5'
    }
  },
  watch: {
    pie: function(val) {
      if (val) {
        this.init()
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const myChart = this.chart || echarts.init(this.$refs.chart);
      let option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          name: this.title,
          type: 'gauge',
          radius: '100%',
          progress: {
            show: true,
            width: 20,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: this.startColor
                }, {
                  offset: 1, color: this.endColor
                }],
                global: false
              }
            }
          },
          axisLine: {
            lineStyle: {
              width: 18
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            length: 5,
            distance: 10,
            lineStyle: {
              width: 1,
              color: '#979797'
            }
          },
          axisLabel: {
            color: '#888888',
            fontSize: 12,
            distance: 23,
            lineStyle: {
              width: 1,
              color: '#979797'
            }
          },
          pointer: {
            width: 4,
            itemStyle: {
              color: '#4694E8'
            }
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 12,
            itemStyle: {
              borderWidth: 4,
              borderColor: '#4694E8'
            }
          },
          title: {
            show: false
          },
          detail: {
            fontSize: 24,
            fontWeight: 500,
            color: '#000000',
            offsetCenter: [0, '70%'],
            valueAnimation: true,
            formatter: '{value}%'
          },
          data: [{
            value: this.pie
          }]
        }]
      };
      myChart.setOption(option);
      this.chart = myChart
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 300px;
  width: 100%;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>