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
可以了，接下來就是在你需要用的頁(yè)面寫了
// 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: '注冊(cè)人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ?{value: this.echartOnline, name: '在線聽力測(cè)試人數(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: '注冊(cè)人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ? ? ?{value: resp.data.previewCount.testCount, name: '在線聽力測(cè)試人數(shù)'},
? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ?}]
? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? })
? ? ? ? }else {
? ? ? ? ? ? this.$message.error(resp.msg)
? ? ? ? }
? ? })
},搞定，這樣子就不用在去定義watch方法了，簡(jiǎn)單粗暴的完成了vue + echrats的數(shù)據(jù)實(shí)時(shí)更新。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 實(shí)現(xiàn)展開折疊效果的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)的效果，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
這篇文章主要介紹了基于Element的組件改造的樹形選擇器,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vuex中的映射允許您將state中的任何屬性(state、getter、mutation和action)綁定到組件中的計(jì)算屬性,并直接使用state中的數(shù)據(jù)，下面我們來詳細(xì)了解2022-09-09
我們?cè)谧鲰?xiàng)目經(jīng)常會(huì)遇到組件功能不能滿足業(yè)務(wù)需求的時(shí)候,這時(shí)候需要在原有的組件上進(jìn)行二次封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件二次封裝的一些實(shí)用技巧,需要的朋友可以參考下2022-04-04
moment.js是一款現(xiàn)在對(duì)時(shí)間處理的強(qiáng)大的函數(shù)，這篇文章主要介紹了Vue?日期獲取的示例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
下面小編就為大家分享一篇vue2.0 子組件改變props值,并向父組件傳值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作
這篇文章主要介紹了vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作，文章圍繞計(jì)vue算屬制作動(dòng)態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下2021-12-12
關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式
這篇文章主要介紹了關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03