Vue之解决Echarts组件使用ID不能复用的问题
更新时间：2024年03月11日 09:52:44 作者：ponGISer
这篇文章主要介绍了Vue之解决Echarts组件使用ID不能复用的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
解决Echarts组件使用ID不能复用问题
项目中封装了echart组件，想重复使用echart图表。
项目开始使用id进行echart图表初始化，发现多次调用同一个组件出现id重复，导致组件只能使用一次得问题。
解决方法
将id改为ref即可。
示例：
原始组件代码：
<template>
<div
id="lineChart"
class="chartContainer"
/>
</template>
<script>
export default {
name: 'LineChart',
components: {
},
data() {
return {
};
},
methods: {
initChart(data) {
const myChart = this.$echarts.init(document.getElementById('lineChart'));
},
};
</script>修改后代码：
<template>
<div
ref="lineChart"
class="chartContainer"
/>
</template>
<script>
export default {
name: 'LineChart',
components: {
},
data() {
return {
};
},
methods: {
initChart(data) {
const myChart = this.$echarts.init(this.$refs.lineChart);
},
};
</script>使用ref即可复用组件。
总结
记录完毕。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
原主流插件 vite-plugin-imagemin 已不兼容 Vite5,会导致构建失败,本文整理了 4 种适用于 Vite5 及以下版本的图片压缩方案,涵盖插件化与自定义脚本,兼顾易用性与灵活性,需要的朋友可以参考下2025-08-08
在最近一个项目的后台管理系统中，写前端界面时用到了ElementUI，但是发现导入数据表格之后表头的高度一直很高，那么如何解决，本文就来详细的介绍一下2021-09-09
本篇文章主要介绍了vue模拟加载更多功能（数据追加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
解决vue报错:Do not mutate vuex store state outside mutati
这篇文章主要介绍了解决vue报错:Do not mutate vuex store state outside mutation handlers问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue-cli2打包前和打包后的css前缀不一致的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
mpvue是一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，这篇文章主要介绍了mpvue构建小程序的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家详细介绍了基于Vue.js实现tab滑块效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文主要介绍了vue使用Luckysheet插件实现excel导入导出，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-03-03
在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论