Echarts中slider滑块调整样式
今天遇到了一个问题,记录一下。
效果图. 原型图
一个页面中,引入了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)
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库