vue中使用vue-schart注意点,为啥数据更新了视图就是不更新??

1.用的别的大佬模板,他已经导入vue-schart,然后封装好了

<template>
    <div>
        <canvas :id="canvasId"></canvas>
    </div>
</template>

<script>
    import sChart from 'schart.js';
    export default {
        data() {
            return {
                schart: null,
                opt: {}
            }
        },
        props: {
            canvasId: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'bar',
            },
            data: {
                type: Array,
                default: [],
            },
            options: {
                type: Object,
                required: false
            }
        },
        mounted() {
            this.renderChart();
        },
        methods: {
            renderChart(){
                this.schart = null;
                this.opt = this.options;
                if(!this.width || !this.height){
                    if(!this.opt){
                        this.opt = {autoWidth: true};
                    }else{
                        this.opt['autoWidth'] = true;
                    }
                }
                this.schart = new sChart(this.canvasId, this.type, this.data, this.opt);
            }
        },
        watch: {
            data(){
                this.renderChart();
            },
            options(){
                this.renderChart();
            },
            type(){
                this.renderChart();
            }
        }
    }
</script>

2.父组件导入模板

3.表格中的数据更新了但是图表就是没有发生变化???

4.陷入思考:为啥不更新啊??

5.查看子组件的代码,发现有个rendarChart()方法是新建清除图表并新建的

6.想方法调用子组件的rendarChart()方法

7.父组件调用子组件中方法的方式: 在子组件中加上ref属性(!!!!)即可通过this.$refs.ref.method调用

例:<children ref="child1"></children>

console.log(this.$refs.child1) //返回的是一个vue对象,所以可以直接调用其方法

8.可以调用了朋友,调用完方法就可以更新了!

   <schart class="schart" ref="chart" canvasId="line" :data="data1" type="line" :options="options2"></schart>

。
。
。
  this.$refs.chart.renderChart();

9.把问题解决的感觉还是很棒的呀

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值