javascript - 单屏滚动情况下,echarts图表无法正常显示
PHP中文网
PHP中文网 2017-04-10 14:46:48
[JavaScript讨论组]

在制作一个关于埃博拉疾病的网站,今天想加入一个通过滚轮进行单屏滑动的功能,结果添加完单屏滑动功能后,发现原来可以正常显示的echarts图标不能正常显示(只显示图例及部分图像),具体情况如图所示:

如下是原来正常的显示:

插入其中一个图标的html代码如下:

<!---- process ---->
        <p class="page page3">
            <p class="contain">
                <p id="process" class="process">
                    <p class="head-section">

                        <p class="container">
                            <h3><span>埃博拉相关信息</span><label>统计图</label></h3>
                        </p>
                        </p>
                        <p class="container">
                            <p class="process-grids text-center wow bounce" data-wow-delay="0.4s">
                                <p id="main6" style="height:600px"></p>
                                <script src="./js/echarts.js"></script>
                                <script src="./js/chart1.js"></script>

                            </p>
                        </p>
                </p>
            </p>
        </p>

如果删除其中的两句(这两句的功能就是加入单屏滚动),图标恢复正常:

<p class="page page3">
            <p class="contain">

加入单屏滑动的js代码为:

<script src="./js/fullPage.min.js"></script>
                                        <script>
                                        var runPage;
                                        runPage = new FullPage({
                                            id: 'pageContain',
                                            slideTime: 800,
                                            effect: {
                                                transform: {
                                                    translate: 'Y'
                                                },
                                                opacity: [0, 1]
                                            },
                                            mode: 'wheel, touch, nav:navBar',
                                            easing: 'ease'
                                        });
                                        </script>

具体可以参考fullpage单屏滚动实现里面的实现方法

请问这种“只显示一部分”的现象有可能是什么地方导致的?请大神指教!

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
PHPz

我现在遇到了类似的问题,请问您当时的问题解决了吗?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号