这个系列主要是用于记录我日常工作中遇到的一些Bug,既属于知识分享，也是对学习习惯的维持…

问题描述

今天，在开发一个WebGIS大屏项目时，我遇到了多个三维Echarts饼图图表渲染的问题，因为相似图表很多，我决定将Echart图表代码封装为一个vue组件，对外暴露数据和样式接口。方便我快速调用；

<div class="alert-list-container"><divclass="alert-item"v-for="alertItem in alertListData":key="alertItem.name"><Pie3DChart:name="alertItem.name":chartData="alertItem.chartData":width="10":height="28"></Pie3DChart></div>
</div>

当我使用v-for循环包含这个图表组件的父组件时，发现页面只显示最后一个组件；
检查过Dom树后发现存在循环出来的新的div元素；很疑惑为什么只渲染一个元素：

相信很多读者已经看出来了，是一个很基础的问题，id是唯一元素标识符😂

那么我们猜测问题的原因：

• 闭包循环：基础问题，不太可能会有，经过排查，发现不是这个问题。
• ref：（接近了）我为每个元素都绑定了ref${name}避免重复，但是在读取这个元素的时候不方便，遂放弃；(应该是有这个解决方案的)

:ref="`chart${name}`"

• ID：各种办法都没有解决后，望着发呆，突然看到ID似乎没有区分，心里感觉这个就是答案😂，这个错误太低级了，既然找到错误了，我们就着手解决!

解决方案

原因

问题出在元素ID绑定上，我在循环的过程中重复将图表绑定在同一个div元素上，导致所有的图表都添加在一个div中，不断替换之前的图表，因此只有一个图表显示(最后一个图表)。

解决方案很简单，就是为每个图表元素绑定不同的ID，这样就可以避免元素重复。我在传入的数据中定义了name属性，也可以用id，主要是用于区分元素；代码如下：

:id="`pie3d-chart${name}`"

然后在js代码中调用，代码如下：

let myChart = echarts.init(document.getElementById("pie3d-chart"+this.name));

保存运行，问题解决！！！

总结

没什么可总结的，基础问题，多记录，建立起自己开发的节奏感，后面就是CV大法，腾出点时间学习点新知识！！！

文章参考

• Echarts官方文档
• Vue官方文档

拓展阅读

• WebGIS开发Bug大全

如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂。