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

最新推荐文章于 2025-06-13 10:59:51 发布

人比黄花嗖

最新推荐文章于 2025-06-13 10:59:51 发布

阅读量6.4k

点赞数 1

CC 4.0 BY-SA版权

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

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

Echarts 专栏收录该内容

6 篇文章

订阅专栏

针对H5页面需求，本文介绍如何使用ECharts自定义滚动条样式，以优化手机端柱状图展示效果，通过调整dataZoom组件属性实现美观且实用的数据滚动展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因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 滚动条的样式自定义，效果如下: