echarts应用到swiper 轮播图中,每次鼠标一点击图表所在slide,图表就会消失

 

问题 ： 反正就是图表跟着一滚动，就消失了，莫名其妙的。

原因：因为存在图表的slide在最后，但凡不是最后一个它都没事，而swiper是循环滚动的，所以swiper在第一个又插入了一个相同的slide。此时图表的id不唯一了。关键是id不唯一了。这不就出问题了。

解决如下：

不用id了，用class。

 <div class="qiangdu" style="width:100%;height: 250px;margin: 0 auto;"></div>

  async getQiangdu() {const names = document.querySelectorAll('.qiangdu');names.forEach(item => {let element = echarts.init(item);let option = {// title: [//   {//     subtext: '研发投入强度',//     left: 'center',//     top: '90%',//     subtextStyle: {//       fontSize: '14px',//       fontWeight: 'bold'//     }//   }// ],grid:{left: '30',right: '20',bottom: '30',top: '20',},tooltip: {show:true,confine: true,  //是否将 tooltip 框限制在图表的区域内。trigger: 'axis',axisPointer: {type: 'cross'},formatter:(params)=>{return this.createEleTips(params)}},xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月'],axisLine: {show: true,lineStyle: {color: '#fff'}}},yAxis: {type: 'value',axisLabel: {show: true,color: '#fff'}},series: [{name: "研发投入强度",data: [200, 200, 200, 200, 300, 500],type: 'line',smooth: true,lineStyle: {color: '#da8b62'},itemStyle:{color: '#da8b62'}}]}element.clear()element.setOption(option)})},