v-chart从后台获取数据

背景：vue 使用v-charts制作图表，从后台获取数据， 并在 el-tab-pane 中显示显示

 

相关知识点：vue中使用v-chart，动态从后端获取数据赋值，并解决 el-table-pane 在动态获取数据渲染图表遇到的问题

 

html:

<ve-pie :data="charData"></ve-pie>

 

script: data(){ return {}}

            charData:{
                columns: ['用户状态', '用户数量'],
                rows: [
                ]                
            },

 

methods:从后台获取数据，没什么说的

 

遇到的问题：

因为是el-tab-pane的类型，所以数据在第一个页面就出来了，然后点击到该页面时，数据有了，但是图表没出来

这时就用watch监听传归来的数据，然后设置  el-tab-pane 为懒加载方式即可

 

    watch:{
        dataTable:{
            handler(newVal,oldVal)
            {for (var i = 0; i < newVal.length; ++i)
                {this.charData.rows.push({
                        "用户状态":newVal[i].userStaus,
                        "用户数量":newVal[i].userMember
                    })
                }
            }
        }
    },

 

然后在外面中设置懒加载

<el-tab-pane label="用户统计" name="userStatistic" lazy>

 

大概的解决思路就是:

页面切换时再刷新数据，数据变化后v-chart重新制作图表显示到页面上去。

 

这样的方法还能解决点击一个 el-table-pane 刷新所有的 tab 页数据造成的多余请求和资源浪费问题