<template>
  <div>
    <div style="width: 95%; height: 220px; margin: 0 auto">
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <div id="gauge_canvas" class="echart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartObj: null,
      gaugeOption: {
        series: [
          {
            startAngle: 180,
            endAngle: 0,
            type: 'gauge',
            min: 0,
            max: 100,
            radius:'110%',
            center: ['50%', '70%'], 
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [
                    1,
                    this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: '#E73FF1'
                      },
                      {
                        offset: 0.2,
                        color: '#89DCBE'
                      },
                      {
                        offset: 0.8,
                        color: '#89DCBE'
                      },
                      {
                        offset: 1,
                        color: '#2836F6'
                      }
                    ])
                  ]
                ]
              }
            },
            axisTick: {
              show:false
            },
            splitLine: {
              length: 10,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 20, //  文字距表盘的距离
              formatter: function (v) {
                let c = parseInt(v);
                switch (
                c + '' // 这是每块的注释，算法是刻度最大值/设置间隔区域的显示数量，我这里是1300/6，具体显示位置自己根据需要调节
                ) {
                  case '0':
                    return '待提升';
                  case '100':
                    return '优秀';
                }
              }
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      },
    };
  },
  methods: {
    getInfo() {
      this.setChart();
    },
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {

        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#gauge_canvas"),
        );
        // 初始化雷达图
        this.gaugeOption.series[0].data[0].value = this.getRandomNumber();
        this.chartObj = chartObj;
        this.chartObj.setOption(this.gaugeOption);
      });
      let _this = this;
      window.addEventListener("resize", () => {
        if (_this.chartObj) {
          _this.chartObj.resize();
        }
      });
    },
    getRandomNumber() {
      // 生成 1-100 之间的随机整数
      return Math.floor(Math.random() * 100) + 1
    }
  },
  watch: {
    userid(newValue, oldValue) {
      this.getInfo();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
};
</script>

<style scoped>
/* .r_box >>> #gauge_canvas > div > canvas {
  width: 435px !important;
} */
</style>