<template>
    <div class="chart-box" ref="chartBox"></div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: "gauge-chart",
    props: {
      value: {
        default: 0,
        type: Number
      },
      title: {
        default: '',
        type: String
      },
      name: {
        default: '',
        type: String
      }
    },
    watch: {
      name() {
        this.init()
      },
      title() {
        this.init()
      },
      value() {
        this.init()
      }
    },
    methods: {
      init () {
        const chartBox = this.$refs.chartBox
        const myChart = echarts.init(chartBox);
        // 指定图表的配置项和数据
        const option = {
          tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
          },
          toolbox: {
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          series: [
            {
              name: this.name,
              type: 'gauge',
              max: 100,
              min: 0,
              // detail: {formatter:'{value}%'},
              data: [{value: this.value, name: this.title}]
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    mounted () {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        this.init()
      })
    }
  }
</script>

<style scoped>
    .chart-box {
        height: 400px;
        width: 100%;
    }
</style>