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

效果图. 原型图

一个页面中，引入了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)
},

Echarts中slider滑块调整样式的更多相关文章

  1. echarts中提示框的样式调整

    第一种方法:利用tooltip 里面的配置项 默认就会有写显示 第二种方法:利用formattet回调函数 返回我们想要显示的信息 formatter : function (params) { va ...

  2. WPF滑块控件(Slider)的自定义样式

    前言 每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式 首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出 ...

  3. Echarts中线状图的X轴坐标标签倾斜样式

    在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的 http://www.cnblogs.com/phpgc ...

  4. 第四章 在MVC4.0中对脚本以及样式表的引用变化

    原文:http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html 一.可以直接使用“~”,而无需使用Href对象 ...

  5. html中滚动栏的样式

    DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日 星期日 01:181)隐藏滚动栏<body style="overflow-x ...

  6. easyUI slider滑块，在加载出来后，easyUI slider滑块禁用方法

    easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...

  7. 表单（下）-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块

    EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...

  8. Winform开发中另一种样式的OutLookBar工具条

    很早的时候,曾经写了一篇随笔<WinForm界面开发之“OutLookBar”工具条>介绍了OutLookBar样式的工具条,得到很多同行的热烈反馈,我个人也比较喜欢这样的工具条布局,因此 ...

  9. 示例：WPF中Slider控件封装的缓冲播放进度条控件

    原文:示例:WPF中Slider控件封装的缓冲播放进度条控件 一.目的:模仿播放器播放进度条,支持缓冲任务功能 二.进度: 实现类似播放器中带缓存的播放样式(播放区域.缓冲区域.全部区域等样式) 实现 ...

  10. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

随机推荐

  1. Docker部署OpenWRT-旁路由

    1.确认网卡名称 命令 ip addr 显示如下图的 enp2s0 就是我们准备进行链接的网卡名称. 2.打开网卡的混杂模式 sudo ip link set enp2s0 promisc on 3. ...

  2. linux配置定时备份mysql数据库

    1.创建备份目录 # mkdir /mydata/bak2.创建备份脚本 # vi /usr/sbin/bakmysql.sh #!/bin/bash #Name:bakmysql.sh #This ...

  3. ZSTUOJ刷题11:Problem D.--零起点学算法106——首字母变大写

    Problem D: 零起点学算法106--首字母变大写 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 18252  Solved: 5211 Descr ...

  4. MySQL数据库架构&SQL注入漏洞

    1.查找zblog数据库中有哪些表

  5. java pta第三次阶段性总结

    一.前言 这是这学期最后一次总结,这三次的pta大作业也是最后一次,这几次大作业主要写了电信计费系统的主要功能,第一次大作业是座机计费功能,第二次大作业是手机计费功能,第三次大作业是短信计费的功能.这 ...

  6. ansible使用笔记：长期更新

    ansible使用笔记 ##将/home/system.sh文件拷贝到所有服务器的/home/system.sh ansible all -m copy -a "src=/home/syst ...

  7. 4组-Beta冲刺-5/5

    一.基本情况 队名:摸鲨鱼小队 组长博客:https://www.cnblogs.com/smallgrape/p/15608986.html github链接:https://github.com/ ...

  8. AntD为Form的List设置默认值 （antd form.list 设置默认值 ）

    import React from "react"; function demo() { const FormConfig = { labelCol: { span: 8 }, w ...

  9. java计时器Timer

    基于java的计时器,定时发送消息 package timer; import java.lang.reflect.Array; import java.text.ParseException; im ...

  10. 关于uniapp图片默认的空隙处理方案

    display:block; 或者 display:flex;