Vue使用echarts定制特殊的儀表盤
更新時(shí)間：2022年03月27日 14:47:20 作者：doit_damao
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts定制特殊的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue使用echarts定制特殊儀表盤的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)的效果：(初始化以及瀏覽器resize的時(shí)候數(shù)字和弧形條均為遞增動(dòng)畫)
HTML部分：
<!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om --> <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 () {
? // 指定圖表的配置項(xiàng)和數(shù)據(jù)
? let option = {
? ? 'series': [
? ? ? {
? ? ? ? 'name': '個(gè)人指標(biāo)',
? ? ? ? 'type': 'gauge',
? ? ? ? 'radius': '65%',
? ? ? ? 'startAngle': '240',
? ? ? ? 'endAngle': '-60',
? ? ? ? // 圖表的刻度分隔段數(shù)
? ? ? ? 'splitNumber': 5,
? ? ? ? // 圖表的軸線相關(guān)
? ? ? ? '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
? ? ? ? },
? ? ? ? // 圖表的刻度標(biāo)簽(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'
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? // 圖表的標(biāo)題
? ? ? ? '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)
? ? ? // 最后轉(zhuǎn)到最終數(shù)據(jù)的地方
? ? ? option.series[0].data[0].value = this.myIvstrAbility
? ? ? option.series[0].axisLine.lineStyle.color[0][0] = this.myIvstrAbility / 100
? ? ? // 使用剛指定的配置項(xiàng)和數(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
? ? // 使用剛指定的配置項(xiàng)和數(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)
? })
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng)小結(jié)
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐。這篇文章主要介紹了vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng),需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vuex持久化存儲(chǔ)之vuex-persist問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Mint UI 是 由餓了么前端團(tuán)隊(duì)推出的 一個(gè)基于 Vue.js 的移動(dòng)端組件庫(kù)，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下2018-04-04
基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
pm是nodejs的包管理和分發(fā)工具,它可以讓javascript開發(fā)者能夠更加輕松的共享代碼和共用代碼片段,下面這篇文章主要給大家介紹了關(guān)于vue腳手架vue-cli卸載與安裝的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue 獲取及修改store.js里的公共變量實(shí)例
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue項(xiàng)目安裝使用vconsole方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了vue3.0生命周期的相關(guān)知識(shí)，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能
這篇文章主要介紹了Vue中結(jié)合clipboard實(shí)現(xiàn)復(fù)制功能 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue使用axios出現(xiàn)options請(qǐng)求方法
這篇文章主要介紹了Vue使用axios出現(xiàn)options請(qǐng)求，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05