echarts 滚动条 缩放
// 初始化是否需要展示滚动条,与初始显示的数据数(总数据数的百分比)
var isShowScroll = false;// 是否显示滚动条,默认false不显示
var dataZoom_end;// 显示百分之多少的数据量,默认全部
if(_xAxis.length >10 ){
dataZoom_end = 100/(_xAxis.length/10);
isShowScroll = true;
}else{
dataZoom_end = 100;
}
dataZoom: [//给x轴设置滚动条
{
start:0,//默认为0
end: dataZoom_end,//默认为100
type: 'slider',
show: isShowScroll,
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 8,//组件高度
left: 50, //左边的距离
right: 40,//右边的距离
bottom: 26,//右边的距离
handleColor: '#ddd',//h滑动图标的颜色
handleStyle: {
borderColor: "#cacaca",
borderWidth: "1",
shadowBlur: 2,
background: "#ddd",
shadowColor: "#ddd",
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数,给第一个设置1,第四个设置0 ,就是水平渐变
//给第一个设置0,第四个设置1,就是垂直渐变
offset: 0,
color: '#1eb5e5'
}, {
offset: 1,
color: '#5ccbb1'
}]),
backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter',
},
//下面这个属性是里面拖拽
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: dataZoom_end,//默认为100
},
]
echarts 滚动条 缩放的更多相关文章
- Echarts dataZoom缩放功能参数详解:
dataZoom=[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示 组件.如果设置为 false,不会显示,但是数据过滤的功能还存在. backgroundC ...
- echarts数据区域缩放(鼠标滚轮、滚动条、拉选框)
当一个echarts图表上的数据很多时,想要查看部分区域的数据状态,可以通过数据区域缩放来实现,现总结三个方法: 鼠标滚轮缩放: var arr = []; for(var i = 0;i<15 ...
- UIKit - scrollView缩放、滚动
UIScrollView滚动 三大属性: self.scrollView.pageEnabled = NO 是否分页:n只要将UIScrollView的pageEnabled属性设置为YES,UIS ...
- $2015 武汉森果公司web后端开发实习日记----书写是为了更好的思考
找暑期实习,3月份分别投了百度和腾讯的实习简历,都止步于笔试,总结的主要原因有两点:基础知识不扎实,缺乏项目经验.后来到拉勾网等网站上寻找实习,看了很多家,都还是处于观望状态.后来参加了武汉实习吧在大 ...
- VCL界面控件DevExpress VCL Controls发布v18.2.7|附下载
DevExpress VCL Controls是 Devexpress公司旗下最老牌的用户界面套包.所包含的控件有:数据录入,图表,数据分析,导航,布局,网格,日程管理,样式,打印和工作流等,让您快速 ...
- echarts中的区域缩放组件dataZoom,主动触发选区缩放点击事件
options设置 toolbox: { // 工具栏 feature: { dataZoom : { // 选时间缩放功能 show : true, // show为true时,才能触发takeGl ...
- echarts 与 百度地图bmap结合系列: 如何设置地图缩放级别和监听缩放事件
简单的demo: // ehcarts 的实例对象 this.myChart = echarts.init(el) // ehcarts加载完成事件 this.myChart.on('finished ...
- echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等
这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...
- 高分辨率下IE浏览器缩放导致出现右侧滚动条问题的解决
0 问题描述 由于需要演示触控操作,采购了SurfacePro,SurfacePro的推荐分辨率为2736×1824,且默认缩放比例为200%,IE浏览器的默认缩放比例也是200%,这样就导致右侧出现 ...
随机推荐
- [luogu P2521] [HAOI2011]防线修建
[luogu P2521] [HAOI2011]防线修建 题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国 ...
- ApiCloud开发的注意事项
1. 引擎或模块问题:遇到应用层无法解决的问题,如果能确定需要引擎和模块支持的,不要自己想办法绕过去,要第一时间在开发者社区提交问题,或找APICloud项目经理提出. !!!注意!!!: 在开发者社 ...
- springBoot 随笔(二)
此文为springBoot 结合 thymeleaf ,解析后台接口数据展示到html页面 基于 springBoot(一)工程. 1/ 引用 thymeleaf 组件依赖 <!-- depen ...
- SQL语句实现行转列
最近在维护一个项目,出现了一下bug需要进行调试,于是把正式库上面的代码搬到本地库上面,数据库是本地的,跑项目的时候调试发现代码里面带有wmsys.wm_concat函数的SQL语句出现错误,经排查发 ...
- Java判断当前时间是否在某一时间段内
今天有一个任务,判断现在的时间是否在某一个时间段内 遇到的第一个问题 Date类获取日期时间大的方法失效了 问题描述: 在学习Date类时,习惯性的用get方法调用Date()的年月日,发现不怎么好用 ...
- 活代码LINQ——08
一.模块代码 ' Fig. 9.6: ListCollection.vb ' Generic List collection demonstration. Module ListCollection ...
- 活代码LINQ——07
来源说明:https://blog.csdn.net/sha574810590/article/details/40738069 在LINQ中,数据源和查询结果实际上都是IEnumerable< ...
- linux修改主机名+免密认证+关闭防火墙
在很多软件安装的时候都有这些需求,因此在这里一起讲一下 修改主机名 简单的使用 hostnamectl 命令就好了 hostnamectl set-hostname NAME 免密认证 准备工作,修改 ...
- 高通 MSM8K bootloader之一: SBL1
MSM8K Boot Flow 转自:http://www.cnblogs.com/liang123/p/6325257.html http://blog.csdn.net/F ...
- rtp传输音视频(纯c代码)
参考链接: 1. PES,TS,PS,RTP等流的打包格式解析之RTP流 https://blog.csdn.net/appledurian/article/details/73135343 2. ...