这个系列主要是用于记录我日常工作中遇到的一些Bug,既属于知识分享，也是对学习习惯的维持…
问题描述
今天，在开发一个WebGIS大屏项目时，我遇到了多个三维Echarts饼图图表渲染的问题，因为相似图表很多，我决定将Echart图表代码封装为一个vue组件，对外暴露数据和样式接口。方便我快速调用；
<div class="alert-list-container">
<div
class="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大法，腾出点时间学习点新知识！！！
文章参考
拓展阅读
如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂。
