zoukankan      html  css  js  c++  java
  • 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 页数据造成的多余请求和资源浪费问题

  • 相关阅读:
    Manacher算法
    [SCOI2010]生成字符串
    [HNOI2008]GT考试
    矩阵乘法
    关于主席树
    Spring 书籍
    Spark书籍
    TimeMeasure
    Dynamic login
    Image quality evaluation
  • 原文地址:https://www.cnblogs.com/wanghao-boke/p/14261207.html
Copyright © 2011-2022 走看看