ECharts显示图形过多增加滚动条

最新推荐文章于 2025-03-04 14:15:34 发布

TSwizzle1327

最新推荐文章于 2025-03-04 14:15:34 发布

阅读量2k

点赞数 1

分类专栏： ECharts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/jduksa/article/details/112286754

版权

Echarts X轴滚动条数据配置图表可视化

关键词由优快云通过智能技术生成

ECharts 专栏收录该内容

6 篇文章

订阅专栏

这篇博客详细介绍了如何在Echarts中配置X轴数据过多时的滚动条功能，包括设置水平滚动条、内嵌滚动条以及相关参数如`orient`, `show`, `start`, `end`, `handleIcon`, `handleSize`等，以确保数据展示的流畅性和用户体验。

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

X轴数据太多，增加滚动条

dataZoom: [{

            orient: "horizontal", //水平/竖直：vertical

            show: show,

            height: 12,

            xAxisIndex: [

                0

            ],

            bottom: '4%',

            start: start,

            end: end,

            zoomLock: true,

            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',

            handleSize: '110%',

            handleStyle: {

                color: "#d3dee5",

            },

            textStyle: {

                color: "#fff"

            },

            borderColor: "#fff",

        },

        {

            type: "inside",

            //鼠标滚动不能触发缩放

            zoomOnMouseWheel: false,

            //moveOnMouseMove:true,

            show: true,

            height: 15,

            start: 1,

            end: 35

        }

        ],