echarts 滚动组件dataZoom解析之h5自定义dataZoom组件样式

最新推荐文章于 2024-09-05 17:08:51 发布

人比黄花嗖

最新推荐文章于 2024-09-05 17:08:51 发布

阅读量6.2k

点赞数 1

分类专栏： Echarts 文章标签： js 前端 css

本文链接：https://blog.csdn.net/sunshineboysy/article/details/107933423

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

因h5页面需求：需要用柱状图展示一个季度内的数据统计情况，而在手机端，只能采用滚动条进行实现，但是echarts自带的滚动组件在手机端不是特别美观，故对其属性进行修改：

dataZoom: [//给x轴设置滚动条
        {


            type: 'slider',//slider表示有滑动块的，inside表示内置的
            // startValue: 8,//可用于设置开始显示的柱子的长度
            // endValue: 1,//可用于设置结束显示的柱子的长度
            start: 80,//默认为0  可设置滚动条从在后进行展示
            end: 100,//默认为100
            show: true,
            xAxisIndex: [0],
            handleSize: 0,//滑动条的 左右2个滑动条的大小
            height: 12,//组件高度
            left: '10%', //左边的距离
            right: '10%',//右边的距离
            bottom: -2,//右边的距离
            borderColor: "#F4F4F4",
            fillerColor: '#E7E7E7',
            backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色
            showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
            realtime: true, //是否实时更新
            filterMode: 'filter',
            handleStyle: {
                borderRadius: '20',
            },
        },
        //下面这个属性是里面拖到
        {
            type: 'inside',
            show: true,
            xAxisIndex: [0],
            start: 0,//默认为1
            end: 100,//默认为100
            moveOnMouseWheel: false,
            preventDefaultMouseMove: false,
        },
    ],

通过上述属性修改即可实现h5页面echarts 滚动条的样式自定义，效果如下: