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

更新時間：2022年03月27日 14:47:20 作者：doit_damao

這篇文章主要為大家詳細介紹了Vue使用echarts定制特殊的儀表盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue使用echarts定制特殊儀表盤的具體代碼，供大家參考，具體內容如下

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

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 () {
? // 指定圖表的配置項和數(shù)據(jù)
? let option = {
? ? 'series': [
? ? ? {
? ? ? ? 'name': '個人指標',
? ? ? ? 'type': 'gauge',
? ? ? ? 'radius': '65%',
? ? ? ? 'startAngle': '240',
? ? ? ? 'endAngle': '-60',
? ? ? ? // 圖表的刻度分隔段數(shù)
? ? ? ? '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
? ? ? ? },
? ? ? ? // 圖表的數(shù)據(jù)詳情
? ? ? ? '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)
? ? ? // 最后轉到最終數(shù)據(jù)的地方
? ? ? option.series[0].data[0].value = this.myIvstrAbility
? ? ? option.series[0].axisLine.lineStyle.color[0][0] = this.myIvstrAbility / 100
? ? ? // 使用剛指定的配置項和數(shù)據(jù)顯示圖表
? ? ? 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
? ? // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? this.myChart.setOption(option)
? ? tempVal++
? }, 20)
? // 此處監(jiān)聽瀏覽器的resize，重新渲染圖表
? let that = this
? window.addEventListener("resize", function () {
? ? clearTimeout(that.resizeTimer)
? ? that.resizeTimer = setTimeout(() => {
? ? ? myChart.resize()
? ? }, 500)
? })
}

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

您可能感興趣的文章: