简单介绍Vue使用echarts定制特殊的仪表盘

共计 2344 个字符，预计需要花费 6 分钟才能阅读完成。

本文实例为大家分享了 Vue 使用 echarts 定制特殊仪表盘的具体代码，供大家参考，具体内容如下

实现的效果：(初始化以及浏览器 resize 的时候数字和弧形条均为递增动画)

HTML 部分：

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)
  })
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券