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.把问题解决的感觉还是很棒的呀