echarts图表多数据，创建鼠标滚轮控制的滚动条

最新推荐文章于 2024-08-16 10:24:56 发布

曦風丶

最新推荐文章于 2024-08-16 10:24:56 发布

阅读量1.5k

点赞数 2

分类专栏： echarts 文章标签： echarts html html5

本文链接：https://blog.csdn.net/qq_33480659/article/details/120199645

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Echarts中dataZoom组件的配置，包括如何设置外部和内部滚动条，控制x轴标签显示，并实现固定每页显示14条数据的功能。同时，讨论了如何禁用默认的刷选行为并锁定滚动区域，以及自定义滚动条的样式和交互行为。

摘要由CSDN通过智能技术生成

配置项为dataZoom，均可在官网配置项手册中查到https://echarts.apache.org/，此处为整合，以便下次使用

nameData_为x轴标签数组，在宽度外形上尽可能做到和不同的滚动条差不多

dataZoom:[{
           type:'slider',//设置外部滚动条
           yAxisIndex:0,//组件控制的轴
           width: 18,
           startValue:nameData_.length,
           endValue:nameData_.length-14,
           minValueSpan:14,
           maxValueSpan:14,//上面4个是为了让滚动条从最上面开始，一页显示14条数据
           brushSelect:false,
           zoomLock:true,//锁定滚动区域
           backgroundColor: '#F1F1F1',
           borderColor:"#ffffff",
   showDataShadow: false,//去除原始组件上的数据阴影
   showDetail: false,
   fillerColor:'#C1C1C1',
   dataBackground:{
       areaStyle:{
           color:'#C1C1C1'
       }
   }
       },{//没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
   type:'inside',
   yAxisIndex:0,
   zoomOnMouseWheel:false, //滚轮是否触发缩放
   moveOnMouseMove:true, //鼠标滚轮触发滚动
   moveOnMouseWheel:true
   }],