簡單介紹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)
  })
}

以上就是本文的全部內容，希望對大家的學習有所幫助。

原文來自：