<template>
  <section ref="echartsContainer"></section>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    title: String,
    maxNum: {
      type: Number,
      default: 100,
    },
    nowNum: Number,
    unit: {
      type: String,
      default: '%',
    },
  },
  data() {
    return {
      chartOptions: {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            max: this.maxNum,
            radius: '100%',
            center: ['50%', '50%'],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#03c2fd',
                    },
                    {
                      offset: 0.5,
                      color: '#1ed3e5',
                    },
                    {
                      offset: 1,
                      color: '#2fded6',
                    },
                  ],
                  global: false,
                },
              },
            },
            axisLine: {
              lineStyle: {
                color: [[1, '#4F518C']],
                opacity: 0.7,
                width: 30,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: this.nowNum,
                name: this.title,
                title: {
                  offsetCenter: ['0%', '20%'],
                  fontSize: 22,
                  fontFamily: 'Microsoft YaHei',
                  color: '#fff',
                  overflow: 'break',
                  lineHeight: 20,
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ['0%', '-15%'],
                  fontSize: 40,
                  fontFamily: 'DIN-Bold,Microsoft YaHei',
                  color: '#03FFFF',
                  formatter: `{value}${this.unit}`,
                },
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    const chartContainer = this.$refs.echartsContainer;
    const chart = echarts.init(chartContainer);
    chart.setOption(this.chartOptions);
  },
};
</script>
