首页 > 其他分享 >Echarts中slider滑块调整样式

Echarts中slider滑块调整样式

时间:2023-03-04 21:55:38浏览次数:30  
标签:两端 448 滑块 样式 slider 柱状图 Echarts

今天遇到了一个问题,记录一下。

效果图. 原型图

一个页面中,引入了echarts的柱状图来动态显示数据,由于柱状图太高,echarts没有自动生成的滚动条,所以就用slider滑块手写了一个,但是效果和原型图不一致,在这里调整一下slider样式,给滑块修改样式为两端圆形。

在slider对象中添加如下属性即可:

// 设置滚动条两端为圆形
handleSize: '100%',
handleIcon:'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
// 设置两端的圆形颜色和滑块颜色相同
handleStyle: {
borderWidth: 0,
color: 'rgb(7, 77, 142, 1)'  // 由于我的滑块色号为rgb(7, 77, 142, 1)
},

 

标签:两端,448,滑块,样式,slider,柱状图,Echarts
From: https://www.cnblogs.com/xytx906/p/17179277.html

相关文章