在Vue开发中遇到页面复用饼图组件导致显示异常的问题，原因是组件内多个饼图共用同一个div id。解决方案包括动态生成唯一id和通过DOM元素选择器获取canvas。动态id可避免绘图冲突，而直接选取DOM元素能更精确地控制每个饼图的绘制位置。
在写页面的时候，同一页面复用了同一饼图组件，然后就出现了如下图：
下面的饼图应该在右边的位置，然后用控制台看了下，第一个图的div里面有两个饼图canvas，第二个图的div里面为空。
g2绘图原理就是根据div的id去查找绘制在那个div里面，所以组件内不能写固定id。
解决方法有两种：
1、动态生成字符串组成id
2、以获取dom元素的方式
this.$el.querySelector(".canvas")
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
