<template>
  <div id="gauge" ref="chart" :style="{ width: width, height: height }" />
</template>

<script>
// import echarts from "echarts";
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/component/legend'

import resize from './mixins/resize'
import color from './color'

export default {
  mixins: [resize],
  props: {
    ratio: {
      type: Number,
      default: 0
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    ratio: function() {
      if (this.chart) {
        var options = this.generateOptions()
        this.chart.setOption(options)
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    var options = this.generateOptions()
    this.chart.setOption(options)

    this.chart.on('click', params => {
      this.$emit('echartClick', params)
    })
  },
  methods: {
    generateOptions() {
      return {
        color: ['#4ABAD2', '#FFB057', '#FB8158'],
        toolbox: {
          show: false
        },
        tooltip: {
          show: false
        },
        grid: {
          top: 0,
          bottom: 0
        },
        series: [
          {
            animation: false,
            silent: true,
            name: '指针圆',
            type: 'pie',
            radius: ['0%', '18%'],
            center: ['50%', '50%'],
            color: '#EAE1E2',
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              shadowColor: 'rgba(100, 100, 100, 0.5)',
              shadowBlur: 1,
              shadowOffsetX: 3,
              shadowOffsetY: 2
            },
            data: [{ value: 100, name: '指针圆', selected: false }]
          },
          {
            animation: false,
            silent: true,
            name: '指针圆2',
            type: 'pie',
            radius: ['0%', '13%'],
            center: ['49%', '48%'],
            color: '#F3F3F1',
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 100, name: '指针圆2', selected: false }]
          },
          {
            animation: false,
            silent: true,
            name: '指针圆3',
            type: 'pie',
            radius: ['0%', '5%'],
            center: ['48%', '46%'],
            color: '#fff',
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 100, name: '指针圆3', selected: false }]
          },
          {
            name: '投资完成',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            center: ['50%', '50%'], // 默认全局居中
            radius: '95%',
            splitNumber: 20,
            axisLabel: {
              show: true,
              color: '#fff',
              distance: -15,
              formatter(v) {
                if (v === 10) {
                  return '20'
                }
                if (v === 30) {
                  return '40'
                }
                if (v === 50) {
                  return '60'
                }
                if (v === 70) {
                  return '80'
                }
                if (v === 90) {
                  return '100'
                }
              }
            },
            axisLine: {
              show: true,
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 100,
                color: [
                  [0.2, 'rgba(108,117,125,0.6)'],
                  [0.4, 'rgba(255,34,34,0.8)'],
                  [0.6, 'rgba(255,89,0,0.7)'],
                  [0.8, 'rgba(0,123,255,0.7)'],
                  [1, 'rgba(15,187,91,0.7)']
                ]
              }
            },
            splitLine: {
              // 分隔线
              show: false
            },
            axisTick: {
              // 坐标轴小标记
              splitNumber: 20,
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: color.grayliner
              }
            },
            title: {
              show: false
            },
            pointer: {
              width: 6
            },
            itemStyle: {
              color: '#EAE1E2',
              shadowColor: 'rgba(100, 100, 100, 0.5)',
              shadowBlur: 1,
              shadowOffsetX: 3,
              shadowOffsetY: 0
            },
            detail: {
              formatter: '{value}%',
              color: '#4a9dd1',
              fontSize: 16
            },
            data: [{ value: this.ratio, name: '完成率' }]
          }
        ]
      }
    }
  }
}
</script>
