<template>
  <el-container v-loading="loading" class="th-charts-ring-progress">
    <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/chart/bar'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/markPoint'

export default {
  name: 'ThEchartsRingProgress',
  components: {
    VChart
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    value: {
      type: Number,
      default: 0
    },
    label: {
      type: String,
      default: ''
    },
    color: {
      type: [String, Array],
      default: () => ['#3ECCFB', '#5BB9FE']
    },
    labelColor: {
      type: String,
      default: '#5BB9FE'
    },
    radius: {
      type: Number,
      default: 85
    }
  },
  computed: {
    charOptions() {
      const that = this
      const color = Array.isArray(this.color) ? new graphic.LinearGradient(0, 0, 0, 1, this.color.map((d, i) => ({ offset: i / (this.color.length - 1), color: d }))) : this.color
      return {
        // 标题
        title: {
          text: this.value + '%',
          left: 'center',
          top: 'center',
          textStyle: {
            color: this.labelColor,
            fontSize: 14
          }
        },
        // 气泡提示框
        tooltip: {
          appendToBody: true,
          formatter(params) {
            return `<span style="color:#fff">${that.label}：${params.value}%</span>`
          }
        },
        // 极坐标系的角度轴。
        angleAxis: {
          max: 100,
          show: false
        },
        // 极坐标系的径向轴。
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        // 极坐标系
        polar: {
          radius: this.radius,
          center: ['50%', '50%']
        },
        // 图表类型
        // bar条形图
        series: [{
          type: 'bar',
          roundCap: true,
          barWidth: 10,
          showBackground: true,
          backgroundStyle: {
            color: '#eeeeee'
          },
          data: [this.value],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              opacity: 1,
              color
            }
          }
        }]
      }
    }
  }
}
</script>
