原因:我们在componentDidMount生命周期里初始化了Pie(echarts的饼图)
componentDidMount() {
this.showPieChart()
}
showPieChart = () => {
let myChart = echarts.init(document.getElementById('PieWrap'))
let data = this.genData()
if (data) {
const option = {
title: {
x: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}',
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: data.legendData,
selected: data.selected,
},
series: [
{
name: '支出项',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: data.seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
myChart.setOption(option, true)
}
}
genData = () => {
const { expendList } = this.props.boardForm
let legendData = []
let seriesData = []
let selected = []
expendList &&
expendList.forEach(it => {
legendData.push(it.name)
seriesData.push({
name: it.name,
value: it.amount,
code: it.code,
})
})
console.log('legendData, seriesData, selected ', legendData, seriesData, selected)
return {
legendData,
seriesData,
selected,
}
}
这个时候,我们的数据还没从接口请求回来, 因此数据是空的!
等我们将数据请求回来的时候, 发现饼图并没有跟着更新数据,也就是看不见饼图了
解决:在componentWillReceiveProps(注意,请求的数据必须来自于props而非state)生命周期中再次调用初始化饼图的方法showPieChart
componentWillReceiveProps() {
this.showPieChart()
}