ECharts x,y轴分别添加自定义的滚动条

最新推荐文章于 2024-09-25 11:26:13 发布

原创最新推荐文章于 2024-09-25 11:26:13 发布 · 1.2w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#滚动条

ECharts 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在x轴和y轴上添加滚动条，包括滚动条的各种配置参数，如开始和结束位置、类型、显示状态、尺寸、颜色等，并展示了内外部拖动的不同效果。

1.x轴添加滚动条

dataZoom: [//给x轴设置滚动条
       {
           start:0,//默认为0
           end: 100-1500/31,//默认为100
           type: 'slider',
           show: true,
           xAxisIndex: [0],
           handleSize: 0,//滑动条的 左右2个滑动条的大小
           height: 10,//组件高度
           left: '10%', //左边的距离
           right: '10%',//右边的距离
           bottom: 26,//右边的距离
           borderColor: "#000",
           fillerColor: '#269cdb',
           borderRadius:5,
           backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
           showDataShadow: false,//是否显示数据阴影 默认auto
           showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
           realtime:true, //是否实时更新
           filterMode: 'filter',
           },
           //下面这个属性是里面拖到
       {
           type: 'inside',
           show: true,
           xAxisIndex: [0],
           start: 0,//默认为1
           end: 100-1500/31,//默认为100
       },
    ],

效果是

2.y轴添加滚动条

dataZoom: [//给x轴设置滚动条
           {
               start:0,//默认为0
               end: 100-1500/31,//默认为100
               type: 'slider',
               maxValueSpan:14,//窗口的大小，显示数据的条数的
               show: true,
               yAxisIndex: [0],
               handleSize: 0,//滑动条的 左右2个滑动条的大小
               height: '80%',//组件高度
               left: 650, //左边的距离
               right: 15,//右边的距离
               top: 50,//右边的距离
               borderColor: "rgba(43,48,67,.8)",
               fillerColor: '#33384b',
               backgroundColor: 'rgba(43,48,67,.8)',//两边未选中的滑动条区域的颜色
               showDataShadow: false,//是否显示数据阴影 默认auto
               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
               realtime:true, //是否实时更新
               filterMode: 'filter',
               yAxisIndex: [0,1],//控制的 y轴
               },
               //下面这个属性是里面拖到
           {
               type: 'inside',
               show: true,
               yAxisIndex: [0,1],
               start: 1,//默认为1
               end: 100-1500/31,//默认为100
           },
       ],

效果：