vue+echarts實現資料實時更新

npm install echarts --save

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

// html 寬高還是儘量固定吧，不然會出現一些奇奇怪怪的問題
<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/>{b} : {c}人"
           },
           toolbox: {
               feature: {
                   dataView: {readOnly: false},
                   restore: {},
                   saveAsImage: {}
               }
           },
           series: [
               {
                   name:'資料統計',
                   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
                       }
                   },
                   // 更新資料的時候，更新的是這個位置的資料
                   data: [
                       {value: this.echartUser, name: '使用者人數'},
                       {value: this.echartRegistered, name: '註冊人數'},
                       {value: this.echartOnline, name: '線上聽力測試人數'},
                   ]
               }
           ]
     })
},

// 獲取資料
getTable () {
    let startTime = this.searchMsg.startTime
    let endTime = this.searchMsg.endTime
    let channel = ''
    previewList(startTime, endTime, channel).then(resp =>{
        if (resp.errCode == 0) {
            // 在這個位置使用nextTick
            // 漏斗圖資料
            this.$nextTick( ()=>{
                this.echartRegistered = resp.data.previewCount.phoneCount
                this.echartUser = resp.data.previewCount.createCount
                this.echartOnline = resp.data.previewCount.testCount
                // 方法一，直接呼叫前面定義的drawLine（）方法，然後給這個方法傳參，然後在方法裡面吧需要動態改變的地方替換成傳參的這個變數達到動態改變資料的目的
                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: '使用者人數'},
                           {value: resp.data.previewCount.phoneCount, name: '註冊人數'},
                           {value: resp.data.previewCount.testCount, name: '線上聽力測試人數'},
                        ]
                     }]
                 })
            })
        }else {
            this.$message.error(resp.msg)
        }
    })
},