<template>
  <div
    ref="gaugeChart"
    style="width: 100%; height: 400px;"
  />
</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 = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: '#F06292',
              shadowColor: 'rgba(240,98,146,0.45)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 18,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: '#999',
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 3,
                color: '#999',
              },
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              backgroundColor: '#fff',
              // borderColor: '#999',
              // borderWidth: 2,
              width: '60%',
              lineHeight: 40,
              height: 40,
              borderRadius: 8,
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              formatter: function(value) {
                // return '{value|' + value.toFixed(0) + '}{unit|km/h}';
                return '{value|' + value.toFixed(0) + '}';
              },
              rich: {
                value: {
                  fontSize: 50,
                  fontWeight: 'bolder',
                  color: '#777',
                },
                unit: {
                  fontSize: 20,
                  color: '#999',
                  padding: [0, 0, -20, 10],
                },
              },
            },
            data: [
              {
                value: 70,
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
};
</script>

<style>

</style>
