zoukankan      html  css  js  c++  java
  • 父组件调用图表组件根据按钮切换展示数据

    1、通过接口请求加自定义的刷新属性更新图表展示(v-if)
    2、通过在子组件加入图表数据监听(watch)
    例:

    watch: {
    	seriesData: {
    		handler: function(n, o){
    			this.initChart(); // 重新渲染图表
    		}
    	}
    }
    

    3、通过父组件调用子组件的方法完成组件视图更新(ref)
    例:

    调用:this.$refs['looppies'].initAll(); // looppies子组件的ref;initAll()子组件中的方法
    方法:initAll() { 
      this.$nextTick(()=>{ this.initChart();  } 
    }
    

    柱状图示例代码:
    1、数据结构

    list = [
    	{
    		typeName: ‘销售量’,
    		xAxisData: [‘一号, ‘二号’, ‘三号’],
    		seriesData: [120, 200, 150]
    	},
    	{
    		typeName: ‘销售金额’,
    		xAxisData: [‘一号, ‘二号’, ‘三号’],
    		seriesData: [1200, 2000, 1500]
    	},
    	{
    		typeName: ‘销售利润’,
    		xAxisData: [‘一号, ‘二号’, ‘三号’],
    		seriesData: [0.2, 0.5, 0.6]
    	}
    ]
    

    2、视图联想
    一排按钮+一各单一的柱状图
    3、props

    props:{
    	seriesData: {
    		type: Array, default: ()=>[]
    	},
    	xAxisData: {
    		type: Array, default: ()=>[]
    	}
    }
    
  • 相关阅读:
    centos6.5-搭建LNMP
    mysql组织结构
    mysql主从复制
    centos6.5-搭建mysql5.7.9
    操作系统的历史
    用户&权限&系统
    awk是全局周期
    在vm上面安装Linux系统
    Linux rpm yum 等安装软件
    linux中execve函数的用法
  • 原文地址:https://www.cnblogs.com/min77/p/14985656.html
Copyright © 2011-2022 走看看