<template>
  <Echart
    ref="chart"
    :options="option"
    class="chart-container"
  />
</template>

<script>
  import Echart from '@/common/echart/index'
  export default {
    name: 'Guage',
    components: { Echart },
    props: {
      rate: {
        type: Number,
        default: 2
      }
    },
    data() {
      return {
        option: {
          series: [
            {
              type: 'gauge',
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: [
                    [0.2, '#c42200'],
                    // [0.4, '#dbbe17'],
                    [1, '#00b7bd']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -10,
                length: 4,
                lineStyle: {
                  color: '#ffffffaa',
                  width: 2
                }
              },
              splitLine: {
                distance: -10,
                length: 8,
                lineStyle: {
                  color: '#ffffffaa',
                  width: 3
                }
              },
              axisLabel: {
                color: '#ffffffee',
                distance: 10,
                fontSize: 10
              },
              detail: {
                valueAnimation: true,
                formatter: '{value} %',
                color: 'auto',
                fontSize: 17
              },
              data: [
                {
                  value: 70
                }
              ]
            }
          ]
        },
      }
    },
    watch: {
      rate(newVal) {
        this.option.series[0].data[0].value = newVal
          this.refreshChart()
        }
    },
    mounted() {
      this.refreshChart()
    },
    methods: {
      refreshChart() {
        this.option.series[0].data[0].value = this.rate
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container{
    width: 100%;
    height:100%;
  }
</style>