vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新

更新時(shí)間：2022年04月11日 08:46:29 作者：深圳最菜的前端

這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新的具體代碼，供大家參考，具體內(nèi)容如下

今天在管理后臺(tái)新增一個(gè)圖表，用了echarts，記錄一下

根據(jù)數(shù)據(jù)實(shí)時(shí)更新

安裝

npm install echarts --save

然后在main.js中配置一下

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

可以了，接下來就是在你需要用的頁面寫了

// html 寬高還是盡量固定吧，不然會(huì)出現(xiàn)一些奇奇怪怪的問題
<div id="previewChart" :style="{width: '600px', height: '600px'}"></div>

data () {
?? ?return {
?? ??? ?echartUser: '',
? ? ? ? echartRegistered: '',
? ? ? ? echartOnline: '',
?? ?}
}

// js
// 這個(gè)是一個(gè)漏斗圖
?drawLine () {
?? ? ? let previewChart = this.$echarts.init(document.getElementById('previewChart'))
?? ? ? previewChart.setOption({
?? ? ? ? ? color: ['#4f8f98', '#233541', '#b32124'],
?? ? ? ? ? title: { text: '漏斗圖' },
?? ? ? ? ? tooltip: {
?? ? ? ? ? ? ? trigger: 'item',
?? ? ? ? ? ? ? formatter: "{a} <br/> : {c}人"
?? ? ? ? ? },
?? ? ? ? ? toolbox: {
?? ? ? ? ? ? ? feature: {
?? ? ? ? ? ? ? ? ? dataView: {readOnly: false},
?? ? ? ? ? ? ? ? ? restore: {},
?? ? ? ? ? ? ? ? ? saveAsImage: {}
?? ? ? ? ? ? ? }
?? ? ? ? ? },
?? ? ? ? ? series: [
?? ? ? ? ? ? ? {
?? ? ? ? ? ? ? ? ? name:'數(shù)據(jù)統(tǒng)計(jì)',
?? ? ? ? ? ? ? ? ? type:'funnel',
?? ? ? ? ? ? ? ? ? left: '10%',
?? ? ? ? ? ? ? ? ? top: 60,
?? ? ? ? ? ? ? ? ? //x2: 80,
?? ? ? ? ? ? ? ? ? bottom: 60,
?? ? ? ? ? ? ? ? ? width: '80%',
?? ? ? ? ? ? ? ? ? // height: {totalHeight} - y - y2,
?? ? ? ? ? ? ? ? ? min: 0,
?? ? ? ? ? ? ? ? ? max: 100,
?? ? ? ? ? ? ? ? ? minSize: '0%',
?? ? ? ? ? ? ? ? ? maxSize: '100%',
?? ? ? ? ? ? ? ? ? sort: 'descending',
?? ? ? ? ? ? ? ? ? gap: 2,
?? ? ? ? ? ? ? ? ? label: {
?? ? ? ? ? ? ? ? ? ? ? show: true,
?? ? ? ? ? ? ? ? ? ? ? position: 'inside'
?? ? ? ? ? ? ? ? ? },
?? ? ? ? ? ? ? ? ? labelLine: {
?? ? ? ? ? ? ? ? ? ? ? length: 10,
?? ? ? ? ? ? ? ? ? ? ? lineStyle: {
?? ? ? ? ? ? ? ? ? ? ? ? ? width: 1,
?? ? ? ? ? ? ? ? ? ? ? ? ? type: 'solid'
?? ? ? ? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? ? ? },
?? ? ? ? ? ? ? ? ? itemStyle: {
?? ? ? ? ? ? ? ? ? ? ? borderColor: '#fff',
?? ? ? ? ? ? ? ? ? ? ? borderWidth: 1
?? ? ? ? ? ? ? ? ? },
?? ? ? ? ? ? ? ? ? emphasis: {
?? ? ? ? ? ? ? ? ? ? ? label: {
?? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 18
?? ? ? ? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? ? ? },
?? ? ? ? ? ? ? ? ? // 更新數(shù)據(jù)的時(shí)候，更新的是這個(gè)位置的數(shù)據(jù)
?? ? ? ? ? ? ? ? ? data: [
?? ? ? ? ? ? ? ? ? ? ? {value: this.echartUser, name: '用戶人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ?{value: this.echartRegistered, name: '注冊人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ?{value: this.echartOnline, name: '在線聽力測試人數(shù)'},
?? ? ? ? ? ? ? ? ? ]
?? ? ? ? ? ? ? }
?? ? ? ? ? ]
? ? ?})
},

// 獲取數(shù)據(jù)
getTable () {
? ? let startTime = this.searchMsg.startTime
? ? let endTime = this.searchMsg.endTime
? ? let channel = ''
? ? previewList(startTime, endTime, channel).then(resp =>{
? ? ? ? if (resp.errCode == 0) {
? ? ? ? ?? ?// 在這個(gè)位置使用nextTick
? ? ? ? ? ? // 漏斗圖數(shù)據(jù)
? ? ? ? ? ? this.$nextTick( ()=>{
? ? ? ? ? ? ? ? this.echartRegistered = resp.data.previewCount.phoneCount
? ? ? ? ? ? ? ? this.echartUser = resp.data.previewCount.createCount
? ? ? ? ? ? ? ? this.echartOnline = resp.data.previewCount.testCount
? ? ? ? ? ? ? ? // 方法一，直接調(diào)用前面定義的drawLine（）方法，然后給這個(gè)方法傳參，然后在方法里面吧需要?jiǎng)討B(tài)改變的地方替換成傳參的這個(gè)變量達(dá)到動(dòng)態(tài)改變數(shù)據(jù)的目的
? ? ? ? ? ? ? ? this.drawLine(this.echartRegistered , this.echartUser, this.echartOnline)
?? ??? ??? ??? ?// 方法二 ，最笨的辦法，重新寫一遍實(shí)例化echarts的方法咯?
? ? ? ? ? ? ? ? let previewChart = this.$echarts.init(document.getElementById('previewChart'))
? ? ? ? ? ? ? ? previewChart.setOption({
? ? ? ? ? ? ? ? ? ? ?series: [{
? ? ? ? ? ? ? ? ? ? ? ? data: [
? ? ? ? ? ? ? ? ? ? ? ? ? ?{value: resp.data.previewCount.createCount, name: '用戶人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ? ? ?{value: resp.data.previewCount.phoneCount, name: '注冊人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ? ? ?{value: resp.data.previewCount.testCount, name: '在線聽力測試人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ?}]
? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? })
? ? ? ? }else {
? ? ? ? ? ? this.$message.error(resp.msg)
? ? ? ? }
? ? })
},

搞定，這樣子就不用在去定義watch方法了，簡單粗暴的完成了vue + echrats的數(shù)據(jù)實(shí)時(shí)更新。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: