echarts的滑动条 dataZoom 样式自定义

最新推荐文章于 2023-09-19 14:54:26 发布

长着狒狒毛的程序媛

最新推荐文章于 2023-09-19 14:54:26 发布

阅读量2.4k

点赞数 2

分类专栏： echarts js 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41515189/article/details/125916331

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

官方链接说明：官方链接
在这里插入图片描述

编写实现例子：

dataZoom = [{
         height: 15, //高度
         type: "slider",
         // show: true,
         xAxisIndex: [0], //控制第一个x轴
         left: '10%', 
         bottom: 20, //图表底部距离
         handleSize: 10,//左右2个滑动条的大小
         borderColor: "#eee", //滑动通道的边框颜色
         fillerColor: '#009688', //滑动条颜色
         backgroundColor: '#eee',//未选中的滑动条的颜色
         showDataShadow: false,//是否显示数据阴影 默认auto
         rangeMode: ['value', 'value'], 
         minValueSpan: 0,
         maxValueSpan: 9,
         startValue: 0,
         endValue: 9,
         handleIcon: "arrow",
         handleSize: "80%",
     }];

效果如图所示：
在这里插入图片描述