Myc_CSDN
和Java狼狈为奸
2019-01-02 20:16
采纳率: 61.5%
浏览 1.5k

echarts 和 swiper 一起使用时echarts的点击事件无效?

我将echarts和swiper 一起使用时,echarts的点击事件就无效了。百度搜索说
swiper将页面拷贝了多份,但没拷贝点击事件,那这个点击事件该怎么注册进去呢?
代码如下:

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div id="my" style="width: 100%; height: 90vh"></div>
        </div>
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="swiper.min.js"></script>
<script type="text/javascript" src="echarts.min-4.2.0.js"></script>
<script type="text/javascript">
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });

    var echars = echarts.init(document.getElementById("my"));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    echars.setOption(option);
    echars.on('click', function (params) {
        alert("1");
    })
</script>
</body>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • Myc_CSDN
    和Java狼狈为奸 2019-01-07 14:21
    已采纳

    这个问题无解,如果有能力,只能通过修改Swiper源码来解决了。

    点赞 评论
  • WEIYAO12345678
    WEIYAO12345678 2019-01-02 13:32
    点赞 评论
  • piaoxue1990tv
    piaoxue1990tv 2019-03-11 16:48

    你可以降低下swiper版本 3.0的不冲突

    点赞 评论
  • bai_riqiang
    bai_riqiang 2019-04-29 16:51

    回退vue-awesome-swiper版本到2.6.7

    npm install vue-awesome-swiper@2.6.7 --save
    
    点赞 评论

相关推荐