Echarts实战案例代码(36)：nicescroll.min.js实现图表隐藏部分滚动显示的解决方案

在Echarts中实现图表数据滚动，一般采用dataZoom组件，但在空间不够的情况下，nicescroll.min.js滚动条也是不错的解决方案。

外部引入nicescroll.min.js

<script type="text/javascript" src="{$STATIC}js/jquery.nicescroll.min.js"></script>

HTML容器代码

<div class="nice">
                    <div class="navBoxAll" id="city"></div>
                </div>

CSS控制

/*城市站点滚动条*/
.nice {
    position: absolute;
    z-index: 10;
    width: 98%;
    height: 275px;
    overflow: auto;
}

#city {
    height: 700px;
    width: 100%;
    overflow: auto;
}

前端调用

//滚动显示;
        $(".nice").niceScroll({
            cursorcolor: "#000",//#CC0071 光标颜色
            cursoropacitymax: 0.4, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
            touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
            cursorwidth: "5px", //像素光标的宽度
            cursorborder: "0", //   游标边框css定义
            cursorborderradius: "5px",//以像素为光标边界半径
            autohidemode: false //是否隐藏滚动条
        });

Done!