<template>
  <div
    ref="gaugeChart"
    style="width: 100%;height:100%;flex:1"
  />
</template>

<script>
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.gaugeChart);
      this.renderChart();
      window.addEventListener('resize', this.handleResize);
    },
    renderChart() {
      const option = {
        grid: {
          left: 60, // 调整左侧边距，给纵坐标添加额外空间
          top: 40,
          right: 10,
          bottom: 30, // 调整底部边距，给横坐标添加额外空间
        },
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '150%',
            center: ['50%', '90%'],
            itemStyle: {
              color: '#F06292',
              shadowColor: 'rgba(240,98,146,0.45)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 15,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 15,
              },
            },
            axisTick: {
              // show: false,
              splitNumber: 2,
              lineStyle: {
                width: 1,
                color: '#999',
              },
            },
            splitLine: {
              // show: false,
              length: 10,
              lineStyle: {
                width: 1,
                color: '#999',
              },
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              // backgroundColor: '#fff',
              // borderColor: '#999',
              // borderWidth: 2,
              // width: '40%',
              // lineHeight: 40,
              // height: 40,
              // borderRadius: 8,
              offsetCenter: [0, '-10%'],
              valueAnimation: true,
              formatter: function(value) {
                // return '{value|' + value.toFixed(0) + '}{unit|km/h}';
                return '{value|' + value.toFixed(0) + '}{unit|%}';
              },
              rich: {
                value: {
                  fontSize: 26,
                  fontWeight: 'bolder',
                  color: '#777',
                },
                unit: {
                  fontSize: 12,
                  color: '#999',
                  padding: [0, 0, -5, 0],
                },
              },
            },
            data: [
              {
                value: 70,
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
};
</script>

<style>

</style>
