Echart和swiper的混合使用

image.png

swiper里的Loop属性

swiper里有个很有趣的属性Loop.
添加之后,就可以发现swiper变成了一个闭环.不管是一张,两张图片.都能前后滑动.

<script> 
  var mySwiper = new Swiper('.swiper-container',{
    loop : true,
  })
</script>

api对这个属性的解释是:

loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。

所以开始的时候,就考虑要用swiper配合Echart来绘图.但在后来实际使用中碰到了很多的问题.

问题1:Echart绘图在滑动后,有空白页

问题2:在swiper上添加的click事件接收不到

研究后发现,这几个问题,主要是由于loop导致的.
不管你有几个页面,swiper在添加了loop属性后,会复制当前的<div>,放到当前页面的前后.复制的div,Class,id也被同时复制.这样让swiper可以滑动.
然后在滑动后,切换当前div的名字,来保证循环往复.

页面dom.png

我在swiper中只实例化了一个div对象.swiper复制了两个div.一共三个div

mya = document.getElementsByClassName('swiper-slide swiper-slide-next')[0];//后

mya = document.getElementsByClassName('swiper-slide swiper-slide-prev ')[0];//前

mya = document.getElementsByClassName('swiper-slide swiper-slide-active')[0];//active

swiper设置了loop:true之后，会复制多个id相同的div，但是canvas标签没有被复制， 导致canvas 没有出现， 所以看起来像是轮空了一次。

有人采用的是生成背景图的方法解决问题，具体请参见微博笔记
https://weibo.com/1731935180/H60nBwje2

我采用的办法是在滑动后
1.清除滑动前之前echarts的canvas图层
2.重新渲染echarts,通过当前的节点来绘制canvas

// 创建初始化Swiper
createdSwiper() {
    let that = this
    this.mySwiper = new Swiper(this.swiperDom, {
        autoplay: false,
        loop: true,
        loopAdditionalSlides: 0,
        direction: 'horizontal', //silder水平居中
        pagination: '.swiper-pagination',//silder水平居中
        paginationClickable: true,
        //centeredSlides: true,
        slidesPerView: 'auto',//开启slide宽度自定义功能
        centeredSlides: true,//首个居中
        spaceBetween: 40,//设置slides间隔
        initialSlide: 0,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        //初始化echart对象,来显示初始状态的图表
        // onInit: function () {
            //     that.createDoubleBarChats();
            //     that.createSettingLineChart();
        // },
        //当slider开始滑动的时候,
        onSlideChangeStart: function (swiper, event) {
            //刷新swiper
            swiper.update();

            if (swiper.swipeDirection) {
                let selectDate = that.state.date, dateStyle = that.state.dateStyle
                //往后滑 下一周
                if (swiper.swipeDirection == 'next') {
                    let str = getNextTime(selectDate, dateStyle)
                    that.setState({
                        date: str,
                    })
                    //查询网络数据接口
                    that.dateChange(str)
                    //清理echart对象
                    that.doubelBarChart.clear()
                    that.settingLineChart.clear()
                  
                } else if (swiper.swipeDirection == 'prev') {
                    //前滑 上一周
                    let str = getPrevTime(selectDate, dateStyle)
                    console.log('prev:', selectDate, str)
                    that.setState({
                        date: str,
                    })
                    that.dateChange(str)
                    that.doubelBarChart.clear()
                    that.settingLineChart.clear()
                }

            }

        },
    //产品需求,滑动向前向后,切换上/下一周.未来日期不可选.
    onSliderMove: function (swiper, event) {
        let selectDate = that.state.date, dateStyle = that.state.dateStyle
        if (swiper.swipeDirection == 'next') {
            if (isBigerThanToday(selectDate, dateStyle) && that.mySwiper) {
                that.mySwiper.lockSwipeToNext()//禁止向下滑
            } else {
                that.mySwiper.unlockSwipeToNext();//解锁向下滑
            }
        }
        if (swiper.swipeDirection == 'prev') {
            that.mySwiper.unlockSwipeToNext();//解锁向下滑
        }
    }
})

在react的render()里,我设置初始化图表的方法.

getChartData() {
    if (this.state.barYDate_1 && this.state.barYDate_2) {
        this.createDoubleBarChats()
        this.createSettingLineChart()
    }
}
--------------    
render() {
        this.getChartData()

有两个图分别实例化图表的关键

var mya = document.getElementsByClassName('swiper-slide swiper-slide-active')[0];//active
var myaaa = mya.getElementsByClassName('DoubelBarChart');
this.doubelBarChart = echarts.init(myaaa[0])
this.doubelBarChart.setOption(options)

------
var mya = document.getElementsByClassName('swiper-slide swiper-slide-active')[0];//active
var myaaa = mya.getElementsByClassName('LearnLineChart');
this.learnLineChart = echarts.init(myaaa[0]);

页面dom结构

 <div ref={name => { this.swiperDom = name }} className="weekpage-swiper-container">
    <div className="swiper-wrapper">
        <div className="swiper-slide" >
            <div className="weekpage-barChart" >
                <section className='DoubelBarChart flex chart-container' id='chart' ref="chart" style={ height: '100%' }></section>
            </div>
            
            <div className="weekpage-lineChart">
                <section className='SettingLineChart flex chart-container' id='chart' ref="chart" style={ height: '100%' }></section>
                <div className='weekpage-barChart-explain' ><span className='weekpage-barChart-icon'>?</span> 评级规则</div>
            </div>
        </div>
    </div>
</div>

2.给图表上添加点击控件的问题.

因为swiper会复制silder里的元素.通过jquery监听所有的class元素.

 <div className='weekpage-barChart-explain' ><span className='weekpage-barChart-icon'>?</span> 评级规则</div>

$(".weekpage-barChart-explain").click(() => {
    console.log('------explainClick---------')
    // ExplainView;



    if (this.explainView == null) {
        this.explainView = new ExplainView()
    }

    this.explainView.show()
});

添加后要注意.添加后的click,会导致多次触发的问题.