Vue中怎么使用echarts定制特殊的儀表盤

這篇文章主要介紹了Vue中怎么使用echarts定制特殊的儀表盤的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中怎么使用echarts定制特殊的儀表盤文章都會有所收獲，下面我們一起來看看吧。

實現的效果：(初始化以及瀏覽器resize的時候數字和弧形條均為遞增動畫)

HTML部分：

<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div class="main-echarts-contianer"
     ref="main">
</div>

CSS部分：

.main-echarts-contianer {
  width: 480px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

JS部分：

drawClockChart () {
  // 指定圖表的配置項和數據
  let option = {
    'series': [
      {
        'name': '個人指標',
        'type': 'gauge',
        'radius': '65%',
        'startAngle': '240',
        'endAngle': '-60',
        // 圖表的刻度分隔段數
        'splitNumber': 5,
        // 圖表的軸線相關
        'axisLine': {
          'show': true,
          'lineStyle': {
            'color': [
              [
                0.9,
                new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#FFD900'
                },
                {
                  offset: 1,
                  color: '#FF8000'
                }
                ])
              ],
              [1, '#56606E']
            ],
            'width': 15
          }
        },
        // 圖表的刻度及樣式
        'axisTick': {
          'lineStyle': {
            'color': '#0F1318',
            'width': 2
          },
          'length': 15,
          'splitNumber': 1
        },
        // 圖表的刻度標簽(20、40、60等等)
        'axisLabel': {
          'distance': -8,
          'textStyle': {
            'color': '#9E9E9E'
          }
        },
        // 圖表的分割線
        'splitLine': {
          'show': false
        },
        // 圖表的指針
        'pointer': {
          'show': false
        },
        // 圖表的數據詳情
        'detail': {
          'formatter': function (params) {
            return '{title|' + '總體得分}' + '\n' + '{score|' + params + '}'
          },
          'offsetCenter': [0, 0],
          'rich': {
            'title': {
              'fontSize': 12,
              'color': '#9E9E9E',
              'lineHeight': 30
            },
            'score': {
              'fontSize': 27,
              'color': '#fff'
            }
          }
        },
        // 圖表的標題
        'title': {
          'offsetCenter': [0, '90%'],
          'color': '#fff',
          'fontSize': 14
        },
        'data': [{
          'name': '完成',
          'value': 31
        }]
      },
      {
        'name': '外層線',
        'type': 'gauge',
        'radius': '72%',
        'startAngle': '240',
        'endAngle': '-60',
        'center': ['50%', '50%'],
        'axisLine': {
          'lineStyle': {
            'width': 1,
            'color': [[1, '#56606E']]
          }
        },
        'splitLine': {
          'length': -6,
          'lineStyle': {
            'opacity': 0
          }
        },
        'axisLabel': {
          'show': false
        },
        'axisTick': {
          'splitNumber': 1,
          'lineStyle': {
            'opacity': 0
          }
        },
        'detail': {
          'show': false
        },
        'pointer': {
          'show': false
        }
      }
    ]
  }
  let tempVal = 0
  clearInterval(this.clockChartTimer)
  this.clockChartTimer = setInterval(() => {
    if (tempVal > this.myIvstrAbility) {
      clearInterval(this.clockChartTimer)
      // 最后轉到最終數據的地方
      option.series[0].data[0].value = this.myIvstrAbility
      option.series[0].axisLine.lineStyle.color[0][0] = this.myIvstrAbility / 100
      // 使用剛指定的配置項和數據顯示圖表
      this.myChart.setOption(option)
      // 初始化渲染完成
      this.renderCompleted = true
      return
    }
    option.series[0].data[0].value = tempVal
    option.series[0].axisLine.lineStyle.color[0][0] = tempVal / 100
    // 使用剛指定的配置項和數據顯示圖表。
    this.myChart.setOption(option)
    tempVal++
  }, 20)
  // 此處監聽瀏覽器的resize，重新渲染圖表
  let that = this
  window.addEventListener("resize", function () {
    clearTimeout(that.resizeTimer)
    that.resizeTimer = setTimeout(() => {
      myChart.resize()
    }, 500)
  })
}

關于“Vue中怎么使用echarts定制特殊的儀表盤”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中怎么使用echarts定制特殊的儀表盤”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。