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定制特殊的仪表盘”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。