Vue之解决Echarts组件使用ID不能复用的问题
作者：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即可复用组件。
总结
记录完毕。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。