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)
      })

    },