<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
// import { debounce } from '@/utils'
// import { getOnOffCount } from '@/api/sDevice'
import 'echarts-liquidfill/src/liquidFill.js'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null,
      // value:0.62,
      data: []
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        title: {
          text: '土壤湿度',
          left: 'center',
          top: '5%',
          textStyle: {
            fontWeight: 'normal',
            color: '#00fcfd'
          }
        },
        series: [{
          type: 'liquidFill',
          radius: '65%',
          data: [0.62, 0.62, 0.62, 0.62],
          itemStyle: {
            normal: {
              color: 'rgba(0,205,0,0.5)'
            }
          },
          backgroundStyle: {
            borderWidth: 5,
            borderColor: 'rgb(0,205,0,0.9)',
            color: 'rgb(255,0,255,0.01)'
          },
          outline: {
            borderDistance: 5,
            itemStyle: {
              borderWidth: 3,
              borderColor: 'rgb(0,84,125)',
              shadowBlur: 10,
              shadowColor: 'rgb(0,181,248)'
            }
          },
          label: {
            normal: {
              textStyle: {
                fontSize: 28,
                color: '#fff'
              }
            }
          }
        }]
      })
    }
  }
}
</script>

