调整仪表盘

<template>
  <chart style="width:100%; height:250px;"
         ref="chart1"
         :options="orgOptions"
         :auto-resize="true"></chart>
</template>

<script>

import echarts from 'echarts'
export default {
  name: 'barChart2',
  data () {
    return {
      orgOptions: {}
    }
  },
  methods: {
    getInfoSucc () {
      this.orgOptions = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        title: [{ //主机使用率的样式
          x: 'center',
          y: '70%',
          text: '主机使用率',
          textStyle: {
            fontSize: 14,
            color: '#0fd0ff',
          },
        }],
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { //【90%】的样式
              formatter: '{value}%',
              offsetCenter: [0, "30%"],
              textStyle: {
                color: 'white',
                fontSize: 20
              },
            },
            pointer: {
              width: 5, // 指针的宽度
              length: "60%", // 指针长度，按照半圆半径的百分比
            },
            splitLine: { // 分割线
              length: 20, // 分割线长度
              lineStyle: {
                width: 1, // 分割线宽度
                color: 'auto' // 分割线颜色，跟着仪表盘走
              }
            },
            axisTick: { // 刻度线
              length: 15, // 刻度线长度
              lineStyle: {
                width: 1, // 分割线宽度
                color: 'auto' // 分割线颜色，跟着仪表盘走
              }
            },
            axisLine: {
              lineStyle: {
                color: [[0.2, '#3dccae'], [0.8, '#207ae8'], [1, '#f06e23']], // 改表盘颜色
                width: 10, // 表盘粗细
              }
            },
            data: [{ value: 90 }],
            title: { // 设置仪表盘中间显示文字样式
              show: false
            },
          }
        ]
      }
    }
  },

  mounted () {
    this.getInfoSucc()
  }
}
</script>