问题描述
问题1:
- 解决方案对应方案1
- 在 Vue 项目中使用 ECharts 时,一开始图表能渲染出来,当切换到其他页面再回来的时候,图表就不显示了
问题2:
- 解决方案对应方案2
- Echarts 图表在子组件中,父组件通过传递数据给子组件的 Echarts 进行渲染,导致图表不显示
问题3:
- 解决方案对应方案3
- 在同一个页面的 Echarts 图表切换回来不显示
解决方案:
方案1:
- 手动删除 Echarts 默认生成的 _echarts_instance_ 属性
- 删除
const domMap = document.getElementById("map_chart");
domMap.removeAttribute("_echarts_instance_");
let myChart = this.$echarts.init(domMap);
myChart.setOption({})
方案2:
- 在父组件更新的数据传递到子组件后,在子组件使用 watch 监听数据的变化,如果数据发生变化再执行渲染
<PieChart :data="subStationPieChartData" :id="'pie_chart1'" />
props: {
id: {
type: String,
require: true,
default() {
return "pie_chart";
},
},
data: {
type: Array,
default() {
return [];
},
},
},
watch: {
id(newVal) {
this.getPieChart(newVal, this.data);
},
data(newVal) {
this.getPieChart(this.id, newVal);
},
},
methods: {
getPieChart(id, data) {
let pieChartData = JSON.parse(JSON.stringify(data));
const pieDom = document.getElementById(id);
this.$echarts.init(pieDom).setOption({})
}
方案3:
- 使用 nextTick()
- 使用 setTimeout(() => {},500)
getData() {
this.$request.get("/getFacCount", {}, { mock: false }).then((data) => {
const res = data.data;
this.$nextTick(() => {
this.getBarChart()
})
setTimeout(() => {
this.getBarChart()
},500)
}
getBarChart() {
const barChart = document.getElementById("barchart");
this.$echarts.init(domChart).setOption({})
}