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%,这样就导致右侧出现 ...
随机推荐
- Ubuntu gitlab安装文档及邮件通知提醒配置
1.安装依赖包,运行命令 sudo apt-get install curl openssh-server ca-certificates postfix 2.由于gitlab官方源可能被“墙”,首先 ...
- MyBatis动态创建表
转载请注明出处:https://www.cnblogs.com/Joanna-Yan/p/9187538.html 项目中业务需求的不同,有时候我们需要动态操作数据表(如:动态建表.操作表字段等).常 ...
- 爬取字段和图片 spider_getModelInformation
import urllibimport urllib2import re class Spider: def getPage(self,pageIndex): url="http://mm. ...
- java课堂笔记
- min_25筛题目总结
看了网上众多博客后,我才发现,实现min_25只有脑子,没有代码. 当然可能是我太ruo了. min_25是一种想法,不是算法. 不要尝试套模板,因为很多题目并没有什么用. 最重要的一点,g不要看成是 ...
- git常用命令学习笔记
安装好git之后即可使用git来管理项目了,鼠标右键点击 git bash出现命令黑窗口,接下来执行git指令即可. https://git-scm.com/book/zh/v2 以下整理了git常用 ...
- 【一:定义】python 简介
[python基础介绍的比较好的link] https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac927076 ...
- [转]MYSQL 创建存储过程
MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...
- JS之代理模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- OO第二单元的总结
三周复三周,一轮又一轮,我似乎已经将OO是为我的生活必须品了.在与同学吐槽者身负-3楼与20楼重任的A电梯君,以及我们都是上一层下两层不用电梯的五号青年的等等欢声笑语中结束了第二轮的OO作业.当然这次 ...