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

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

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

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

今天在管理后臺新增一個圖表，用了echarts，記錄一下

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

安裝

npm install echarts --save

然后在main.js中配置一下

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

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

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

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

// js
// 這個是一個漏斗圖
?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)計',
?? ? ? ? ? ? ? ? ? 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ù)據(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) {
? ? ? ? ?? ?// 在這個位置使用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（）方法，然后給這個方法傳參，然后在方法里面吧需要動態(tài)改變的地方替換成傳參的這個變量達到動態(tài)改變數(shù)據(jù)的目的
? ? ? ? ? ? ? ? this.drawLine(this.echartRegistered , this.echartUser, this.echartOnline)
?? ??? ??? ??? ?// 方法二 ，最笨的辦法，重新寫一遍實例化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ù)實時更新。

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

您可能感興趣的文章: