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: ()=>[]
    	}
    }
    
  • 相关阅读:
    leetcode1627 带阈值的图连通性
    leetcode402 移掉k位数字
    Python-Hello world!
    初识Python-Python介绍
    Python初探-购物车程序
    初识Docker
    Mybatis的工作原理
    Mybatis的逆向工程
    Mybatis的简介
    常量、变量&数据类型
  • 原文地址:https://www.cnblogs.com/min77/p/14985656.html
Copyright © 2011-2022 走看看