<template>
  <div>
    <div id="tchby"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.chart8()
  },
  methods: {
    chart8() {
      const tchby = document.getElementById('tchby');
      const myChart8 = echarts.init(tchby);
      const option8 = {

        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            progress: {
              show: true
            },
            axisLabel: {
              show: false  // 将show设置为false来隐藏刻度值
            },
            axisLine: {
              lineStyle: {
                width: 2,  //仪表盘宽度
                color: [
                  [0.2, '#228b22'],
                  [0.8, '#0099ff'],
                  [1, '#F1060B']
                ],
              }
            },
            radius: '80%',//仪表盘大小
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
              color: 'blueviolet',
              fontSize: 16,
              top: '30%'
            },
            data: [
              {
                value: 70,
              }
            ]
          }
        ]
      };



      option8 && myChart8.setOption(option8);
    },

  }
}

</script>
<style scoped>
#tchby {
  width: 180px;
  height: 135px;
}
</style>