echarts 鼠标滚轮滚动平移窗口

Mr.LiLong

于 2024-08-13 10:13:28 发布

阅读量107

点赞数 1

文章标签：前端 echarts

本文链接：https://blog.csdn.net/qq_43086723/article/details/141156733

版权

在这里插入图片描述


                dataZoom: [
                    {
                        // zoomOnMouse
                        id: 'dataZoomY',
                        show: true, // 是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 4, // 一次性展示5个   7 - 5  9 - 6
                        left: 0,
                        width: 6,
                        borderColor: 'transparent',
                        fillerColor: '#F1F1F1',
                        zoomLock: true,
                        showDataShadow: false, // 是否显示数据阴影 默认auto
                        backgroundColor: '#fff',
                        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
                        realtime: true, // 是否实时更新
                        filterMode: 'filter',
                        handleIcon: 'circle',
                        handleStyle: {
                            color: '#F1F1F1',
                            borderColor: '#F1F1F1',
                        },
                        moveHandleSize: 0,
                        yAxisIndex: 0,
                        brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
                    },
                    {
                        type: 'inside',
                        yAxisIndex: 0,
                        zoomOnMouseWheel: false, // 滚轮是否触发缩放
                        moveOnMouseMove: true, // 鼠标滚轮触发滚动
                        moveOnMouseWheel: true,
                    },
                    {
                        // zoomOnMouse
                        id: 'dataZoomX',
                        show: true, // 是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 4, // 一次性展示5个   7 - 5  9 - 6
                        left: 0,
                        width: 6,
                        borderColor: 'transparent',
                        fillerColor: '#C1C1C1',
                        yAxisIndex: 0,
                        zoomLock: true,
                        showDataShadow: false, // 是否显示数据阴影 默认auto
                        backgroundColor: '#fff',
                        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
                        realtime: true, // 是否实时更新
                        filterMode: 'filter',
                        handleIcon: 'circle',
                        handleStyle: {
                            color: '#C1C1C1',
                            borderColor: '#C1C1C1',
                        },
                        moveHandleSize: 0,
                        brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
                    },
                    {
                        type: 'inside',
                        yAxisIndex: 0,
                        zoomOnMouseWheel: false, // 滚轮是否触发缩放
                        moveOnMouseMove: true, // 鼠标滚轮触发滚动
                        moveOnMouseWheel: true,
                    },
                ],