<template>
  <el-container v-loading="loading" class="th-charts-water-polo">
    <el-main>
      <v-chart
        class="th-echarts"
        :loading="loading"
        :options="charOptions"
        autoresize
        v-on="$listeners"
      />
      <div class="echart-label">{{ label }}</div>
    </el-main>
  </el-container>
</template>

<script>
import graphic from 'echarts/lib/util/graphic'
import VChart from 'vue-echarts'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts-liquidfill'
import { colorRgba } from '../../../src/utils/util'

export default {
  name: 'ThEchartsWaterPolo',
  components: {
    VChart
  },
  props: {
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 数据
    value: {
      type: Number,
      default: 0
    },
    // 颜色
    color: {
      type: Array,
      default: () => ['#FFBB09', '#FAEB21']
    },
    // 文字
    label: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 背景色
    bgColor() {
      return new graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: this.color[0] },
        { offset: 1, color: this.color[1] }
      ])
    },
    // 边框色
    borderColor() {
      return new graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: colorRgba(this.color[0], 0.2) },
        { offset: 1, color: colorRgba(this.color[1], 0.2) }
      ])
    },
    // 属性
    charOptions() {
      return {
        series: [{
          type: 'liquidFill',
          data: [{ value: this.value / 100, name: this.label }],
          radius: '70%',
          // 水球颜色
          color: [this.color[0]],
          center: ['50%', '50%'],
          tooltip: {
            appendToBody: true,
            show: true
          },
          // outline  外边
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 9,
              borderColor: colorRgba(this.color[0], 0.2)
            }
          },
          label: {
            color: this.color[0],
            fontWeight: 500,
            fontSize: 20
          },
          itemStyle: {
            shadowBlur: 0
          },
          // 内图 背景色 边
          backgroundStyle: {
            color: colorRgba(this.color[0], 0.2),
            borderWidth: 3,
            borderColor: this.color[0]
          }
        }]
      }
    }
  }
}
</script>
