问题
在mounted中加载echart,在加载一次之后,父组件传过的数据变化,也不会再次引起渲染
解决思路
利用watch去监听数据的变化，当监听到变化时，让echarts去重新渲染
props: {
value1: Object,
value2: Object,
title: {
type: String,
default: ''
},
title1: {
type: String,
default: ''
},
title2: {
type: String,
default: ''
}
},
mounted () {
this.init()
},
watch: {
value1: {
handler () {
this.init()
},
deep: true
}
},
methods: {
init () {
const data1 = [this.value1.gpa, this.value1.gpa1, this.value1.gpa2, 5]
const data2 = [this.value2.gpa, this.value2.gpa1, this.value2.gpa2, 5]
const mychart = echarts.init(this.$refs.echart)
const option = {
title: {
text: this.title
},
tooltip: {
trigger: 'item'
},
legend: {
data: [this.title1, this.title2]
},
radar: {
indicator: [
{ name: '总绩点', max: 5 },
{ name: '高数上', max: 5 },
{ name: '高数下', max: 5 },
{ name: '其他、', max: 5 }
],
radius: '60%'
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: data1,
name: this.title1
},
{
value: data2,
name: this.title2
}
]
}
]
}
mychart.setOption(option)
}
}
}
