// 初始化是否需要展示滚动条,与初始显示的数据数(总数据数的百分比)

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 滚动条 缩放的更多相关文章

  1. Echarts dataZoom缩放功能参数详解:

    dataZoom=[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示 组件.如果设置为 false,不会显示,但是数据过滤的功能还存在. backgroundC ...

  2. echarts数据区域缩放(鼠标滚轮、滚动条、拉选框)

    当一个echarts图表上的数据很多时,想要查看部分区域的数据状态,可以通过数据区域缩放来实现,现总结三个方法: 鼠标滚轮缩放: var arr = []; for(var i = 0;i<15 ...

  3. UIKit - scrollView缩放、滚动

    UIScrollView滚动 三大属性: self.scrollView.pageEnabled = NO  是否分页:n只要将UIScrollView的pageEnabled属性设置为YES,UIS ...

  4. $2015 武汉森果公司web后端开发实习日记----书写是为了更好的思考

    找暑期实习,3月份分别投了百度和腾讯的实习简历,都止步于笔试,总结的主要原因有两点:基础知识不扎实,缺乏项目经验.后来到拉勾网等网站上寻找实习,看了很多家,都还是处于观望状态.后来参加了武汉实习吧在大 ...

  5. VCL界面控件DevExpress VCL Controls发布v18.2.7|附下载

    DevExpress VCL Controls是 Devexpress公司旗下最老牌的用户界面套包.所包含的控件有:数据录入,图表,数据分析,导航,布局,网格,日程管理,样式,打印和工作流等,让您快速 ...

  6. echarts中的区域缩放组件dataZoom,主动触发选区缩放点击事件

    options设置 toolbox: { // 工具栏 feature: { dataZoom : { // 选时间缩放功能 show : true, // show为true时,才能触发takeGl ...

  7. echarts 与 百度地图bmap结合系列: 如何设置地图缩放级别和监听缩放事件

    简单的demo: // ehcarts 的实例对象 this.myChart = echarts.init(el) // ehcarts加载完成事件 this.myChart.on('finished ...

  8. echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

    这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...

  9. 高分辨率下IE浏览器缩放导致出现右侧滚动条问题的解决

    0 问题描述 由于需要演示触控操作,采购了SurfacePro,SurfacePro的推荐分辨率为2736×1824,且默认缩放比例为200%,IE浏览器的默认缩放比例也是200%,这样就导致右侧出现 ...

随机推荐

  1. zzw原创_ipv6下环境配置防火墙及FTP处理一例

    缘由:公司这段时间要将原IPV4地址切换到IPV6,在环境配置的过程中,碰到一坑,平时不太注意的问题,在IPV6下却放大了 实现目标:在IPV6下,机器A可以FTP到机器B,可以传输.下载文件 A机器 ...

  2. php上传文件,接口是java,go。

    $uri = ‘https://www.xxx.com/api/xxxxx’; $ch = curl_init(); //加@符号curl就会把它当成是文件上传处理 $tmpName = $_FILE ...

  3. windows服务器安全管理工具——IISCrypto

    官方网站地址:https://www.nartac.com/Products/IISCrypto/ 下载地址:https://www.nartac.com/Products/IISCrypto/Dow ...

  4. 为虚机Linux系统设置静态IP,ping通外网并解决相关问题

    在虚机中安装完Linux系统后,虚机是ping不通外网的,而默认的动态IP会为之后的Hadoop应用造成不少麻烦,为了减少这些不必要的麻烦,我们把系统的IP设置为静态. 步骤: 修改系统配置文件 命令 ...

  5. Android Studio之SVN打分支、切换分支及合并分支

    1.打分支: 右击项目--Subversion--Branch or Tag 点击OK,分支就创建成功了,接下来我们切换到分支v2 2.切换分支: 右击项目--Subversion--Update D ...

  6. aop技术理解使用

    一.什么是AOP?   aop技术是面向切面编程思想,作为OOP的延续思想添加到企业开发中,用于弥补OOP开发过程中的缺陷而提出的编程思想.AOP底层也是面向对象:只不过面向的不是普通的Object对 ...

  7. python学习博客地址集合。。。

    python学习博客地址集合...   老师讲课博客目录 http://www.bootcdn.cn/bootstrap/  bootstrap cdn在线地址 http://www.cnblogs. ...

  8. UnboundLocalError: local variable 'f' referenced before assignment

    参考方案链接: 1.http://blog.chinaunix.net/uid-631981-id-3766212.html 2.http://blog.sina.com.cn/s/blog_4b9e ...

  9. net core 随笔

    UseApplicationInsights  这个有用到azure 才有用, 平时没用的话可以去掉. 遥测. 上下文指的是 进程间占有的资源空间. 当一个进程时间片到了或者资缺的时候就会让出CPU ...

  10. shell编程(二)

    第三十二次课 shell编程(二) 目录 十五.shell中的函数 十六.shell中的数组 十七.告警系统需求分析 十八.告警系统主脚本 十九.告警系统配置文件 二十.告警系统监控项目 二十一.告警 ...