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>