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%,这样就导致右侧出现 ...
随机推荐
- OSS文件上传到阿里云
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script&g ...
- Cognos集成至portal平台运行报表时只出“#”
1. 问题描述 报表集成到平台后,运行报表过程中,当多次运行后,页面只显示“#” 2. 问题分析 这是因为浏览器筛选器限制问题 3. 解决方案 在IE浏览器设置中,Internet选项-安全-自定义级 ...
- orace如何创建函数并调用
我们来定义一个oracle的函数 create or replace function 方法名(参数名1 参数类型,参数名2 参数类型,参数名3 参数类型)return 返回类型 is num_C n ...
- 【css3】画‘百分比圆’
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- socket应用(vue、node.js、M站)
socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
- lr12关联,响应乱码
1.前程贷登录.投标脚本 Action() { // web_url("登录页", // "URL=http://120.78.128.25:8765 ...
- linux服务器用nginx做网站内页之间301的跳转方法
例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...
- HTML5-2
1 html5新增表单元素 <form> <!-- 数字 还有箭头,可以加减数字 并且可以设置最大最小值 --> <input type="number&quo ...
- QT学习教程
原地址:http://www.devbean.NET/2012/08/qt-study-road-2-catelog/ 网上看到的不错的教程 本教程以qt5为主,部分地方会涉及qt4.据说非常适合qt ...
- lnamp环境搭建博客、论坛
实验环境:Centos6.5 源码安装Nginx yum安装Apache.php.Mysql Mysql: yum -y install mysql-server 安装Mysql数据库 /etc/i ...