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

<script lang='ts'>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
@Component({ name: 'LiquidFillChart', components: {} })
export default class LiquidFillChart extends Vue {
  @Prop({ type: Number, default: () => ({}) }) percent
  @Watch('percent', { immediate: true })
  onChangeMethod() {
    this.$nextTick(() => {
      this.initialChart()
    })
  }
  myChart = null
  destroyChart() {
    if (this.myChart != null) {
      this.myChart.dispose()
      this.myChart = null
    }
  }
  initialChart() {
    this.destroyChart()
    var value = this.percent
    let option = {
      backgroundColor: 'transparent',
      series: [
        {
          type: 'liquidFill',
          radius: '100%',
          center: ['50%', '50%'],
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#446bf5'
                },
                {
                  offset: 1,
                  color: '#2ca3e2'
                }
              ],
              globalCoord: false
            }
          ],
          data: [value, value], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: 'RGBA(51, 66, 127, 0.7)'
          },
          label: {
            textStyle: {
              fontSize: 18,
              fontFamily: 'Alimama ShuHeiTi',
              fontWeight: ' bold',
              fontStyle: 'italic',
              color: '#FFFFFF'
            }
          },
          outline: {
            // show: false
            borderDistance: 0,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#112165'
            }
          }
        }
      ]
    }

    this.creatChart(option, this.$refs.chart)
  }
  creatChart(option, ref) {
    this.myChart = echarts.init(ref) //this.$refs.chart
    this.myChart.resize()
    this.myChart.setOption(option, {
      notMerge: true
    })
    //图表大小自适应
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
.LiquidFillChart {
  height: 100%;
  width: 100%;
}
</style>