Echarts使用時(shí)當(dāng)數(shù)據(jù)發(fā)生變化頁(yè)面不會(huì)重新渲染椒楣,需要對(duì)變化的數(shù)據(jù)設(shè)置監(jiān)聽蚜退,當(dāng)數(shù)據(jù)變化后直接
先清空echarts中的所有的組件以及圖表闰靴,然后再重新將我們剛開始實(shí)例化的代碼加進(jìn)去
this.chart = echarts.init(this.$refs.main, 'dark')
//下面是對(duì)sidebar進(jìn)行監(jiān)聽
watch: {
'$store.state.app.sidebar' (val, old) {
this.chart.resize()
}
}
setOption的第二個(gè)參數(shù)(notmerge)
設(shè)置為true的話彪笼,就是notMerge,不合并蚂且,false的話配猫,就Merge,之前的東西還保留
當(dāng)修改setOption值的時(shí)候杏死,我們異步回來的數(shù)據(jù)層級(jí)比較深的情況下泵肄,需要echarts重繪,否則不會(huì)如愿顯示淑翼。主要體現(xiàn)腐巢,你增加數(shù)據(jù)可以,但是減少數(shù)據(jù)玄括,發(fā)現(xiàn)視圖上還是保持著最多數(shù)據(jù)的展示效果
watch: {
homeEchartsOption: {
deep: true,
handler: function (newVal, oldVal) {
if (newVal) {
setTimeout(() => {
this.chart.setOption(newVal, true)
}, 300)
} else {
// this.chart.setOption(oldVal, true)
}
this.chart.resize()
}
}
},
在echarts中要將所有設(shè)置指定在geo上時(shí)只需在series內(nèi)設(shè)置geoIndex: 0
執(zhí)行echarts時(shí)出現(xiàn) there is a chart instance already initialized on the dom
原因冯丙,多次使用echarts.init(document.getElementById(this.options.zid));
解決方案:設(shè)為全局