vue中使用echarts刷新可以正常渲染,路由跳转不显示
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在 Vue 中使用 ECharts 组件时,遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因。当你从一个页面切换到另一个页面时,旧页面上的组件会被销毁,并在新页面上重新创建。
要解决这个问题,你可以尝试以下方法:
- 使用
v-if
条件渲染:在你的模板中,可以将图表组件包裹在一个具有v-if
条件的容器元素中。通过根据条件动态加载和销毁组件,确保在路由发生变化时正确显示图表。
<template>
<div>
<div v-if="showChart">
<echarts :options="chartOptions"></echarts>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
data() {
return {
showChart: false,
chartOptions: {...} // 图表配置项
};
},
mounted() {
this.showChart = true;
this.renderChart();
},
methods: {
renderChart() {
const chartContainer = document.querySelector('#chart-container');
const myChart = echarts.init(chartContainer);
myChart.setOption(this.chartOptions);
}
}
};
</script>
- 使用 Vue 的
keep-alive
组件:将包含图表的组件包裹在keep-alive
标签中,这样在路由切换时,组件会被缓存而不会被销毁。这样,当你返回之前的路由时,图表组件会保持之前的状态。
<template>
<keep-alive>
<echarts :options="chartOptions"></echarts>
</keep-alive>
</template>
<script>
import echarts from 'echarts';
export default {
data() {
return {
chartOptions: {...} // 图表配置项
};
},
mounted() {
this.renderChart();
},
methods: {
renderChart() {
const chartContainer = document.querySelector('#chart-container');
const myChart = echarts.init(chartContainer);
myChart.setOption(this.chartOptions);
}
}
};
</script>
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)