(原)Echarts 报Uncaught Error: Initialize failed: invalid dom 根本解决

 

1.循环出的Echarts出现 Uncaught Error: Initialize failed: invalid dom ，附上完美解决方案

setTimeout(function () {
console.log(item.id)
console.log(item.val)
console.log(item.color)
var option = {
legend: {
orient: "vertical",
x: "left",
y: "top"
},
series: [{
name: "访问来源",
type: "pie",
radius: ["88%", "100%"],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: true,
textStyle: {}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: item.val
},
{
value: 100 - item.val
}
],
color: [item.color, "#e9e9e9"]
}]
};

console.log($("#ecartsid_1"));
let myChart = echarts.init(document.getElementById(item.id));
myChart.setOption(option);
myChart = null;
}, 1)
　　

2.结合vue 

view 结构：

<li v-for="(item ,index) in listcardData" :style="">

 

<div>

<div class="doughnutChart" id="my_doughnut_chart_item">

<div class="doughnutChart_center_w" :style="{'color':item.color }">{{item.val}}<img class="doughnutChart_center_w_img" :src="item.imgUrl_i"></img>

</div>

<div :id="item.id" class="doughnutChart_center"></div>

{{mutation_listCardFn(item)}}

</div>

</div>

</li>