echarts dataZoom修改滑动条的样式

最新推荐文章于 2024-06-08 21:17:27 发布

今天你码了吗

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/weixin_50249353/article/details/129366025

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 dataZoom:   [
        {
        type: 'slider',
        start: 0,  //默认显示的区域 这里是0-100全部显示
        end: 100,
        bottom: 20,
        // height:10, //这个是滚动条的高度
        fillerColor:'rgb(135,206,235,0.5)',  //这个设置颜色 可以改成适合自己页面的
      //  backgroundColor:'#efefef',  这个是滑动后 的区域显示的颜色
        // showDataShadow: false,  //这个没怎么用过
        // moveHandleSize: 0,   // 上面的小条条 hover显示的那一块 这里不会改颜色  有大佬会的 可以教教我 谢谢了
        // handleSize: 20,   // 左右的手柄 大小
    //     handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z', // 可以改成自己想要手柄样式
    //     handleColor:'#87CEEB', 手柄颜色
    //     handleStyle: {
		// 	borderColor: '#87CEEB',
		// 	shadowBlur: 4,
		// 	shadowOffsetX: 1,
		// 	shadowOffsetY: 1,
		// 	shadowColor: '#87CEEB'
		// },
     moveHandleStyle: {
      color:'#87CEEB'
     },  //移动区域的颜色
        textStyle:{
            width: 100,
            overflow:'break'
          } 
        } //这里可以让你显示不出来的 字体换行
    ] ,

先记录下来后面补充