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即可复用组件。
总结
记录完毕。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。