eCharts_数据过多底部滚动条实现数据展示
效果图：
实现原理：
1.添加dataZoom属性
效果实现代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<title></title>
<style type="text/css">
#echats01 {
height: 300px;
width: 300px;
}
</style>
</head> <body>
<div id="echats01"></div>
<script type="text/javascript">
var dom01 = document.getElementById("echats01");
var myChart01 = echarts.init(dom01);
var app = {};
option = null;
var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 50, 100, 30, 130];
chart1(); function chart1() {
//图表一
option = {
//添加横线滚动条
dataZoom: {
start: 0, //默认为0
end: 100 - 1500 / 31, //默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: 20, //左边的距离
right: 20, //右边的距离
bottom: 30, //右边的距离
handleColor: '#CBBCDB', //h滑动图标的颜色
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 2,
background: "#CBBCDB",
shadowColor: "#CBBCDB",
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#CBBCDB'
}, {
offset: 1,
color: '#CBBCDB'
}]),
backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
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',
},
//图表的位置设置
grid: {
x: 30,
y: 10,
x2: 30,
y2: 70,
top: 20,
borderWidth: 1
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999'
}
},
//全局字体颜色
textStyle: {
color: '#B3B3B3'
},
itemStyle: {
color: '#666'
},
//X轴参数设置
xAxis: {
type: 'category',
boundaryGap: false,
data: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisLabel: {
interval: 0
},
axisTick: {
show: false,
},
},
//Y轴参数设置
yAxis: [{
type: 'value',
//data: [0, 30, 60, 90, 120, 150],
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisLabel: {
interval: 0
},
axisTick: {
show: false,
},
splitLine: {
show: false,
}
}],
//服务数据
series: [{
name: '目标占比',
type: 'line',
smooth: true,
stack: '总量',
data: data1,
itemStyle: {
normal: {
color: '#6FA9D9',
lineStyle: {
color: '#6FA9D9'
}
}
},
}, ]
};
//实例化图表
if(option && typeof option === "object") {
myChart01.setOption(option, true);
};
//end
}
</script>
</body> </html>
2018年11月19日，新增
"axisLine":{ //y轴
"show":false
},
"axisTick":{ //y轴刻度线
"show":false
},
"splitLine": { //网格线
"show": false
}
eCharts_数据过多底部滚动条实现数据展示的更多相关文章
- 实现winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部
判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为DataGridView控件添加Scroll事件,然后写入以下代码就可以了,应用范围:可实现分部加载数据 ...
- winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部 z
http://www.zuowenjun.cn/post/2015/05/20/162.html 判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为Dat ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- 查询数据过多页面反应慢引入缓存解决方案（Redis、H2）
问题:原系统查询接口不支持分页也不可能加入分页支持,导致Ajax查询数据过多,返回数据达到2W多条记录时响应已经极慢,查询功能不要求数据实时性,页面反应速度极慢.体验不好:经排查是由于数据量过大导 ...
- 第27讲 UI组件之 ScrollView与底部动态添加数据
第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...
- vue 中监测滚动条加载数据（懒加载数据）
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- 服务追踪数据使用 RabbitMQ 进行采集 + 数据存储使用 Elasticsearch + 数据展示使用 Kibana
服务追踪数据使用 RabbitMQ 进行采集 + 数据存储使用 Elasticsearch + 数据展示使用 Kibana https://www.cnblogs.com/xishuai/p/elk- ...
- 用Python介绍了企业资产情况的数据爬取、分析与展示。
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:张耀杰 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
随机推荐
- 利用Fiddler,解密wireshark抓的HTTPS包
背景介绍 HTTPS加密方式介绍 浏览器-->SSL Client Hello(我支持这些加密方式)-->服务器 浏览器<-SLL Server Hello(就用这种加密,然后下面是 ...
- Tiny4412 LED 程序
package cn.hyc.led; import android.os.Bundle; import android.app.Activity; import android.view.Menu; ...
- E2202 Required package 'rtl' not found"
最近重新下载了一个delphi Berlin 10.1.2绿色版本,解压后剪切到别的盘上了,一些需要直接编译的.dpk包,例如fastReport都不能了,都提示E2202 Required pack ...
- Ajax在jQuery中的应用（加载异步数据、请求服务器数据）
加载异步数据 jQuery中的load()方法 load(url,[data],[callback]) url:被加载的页面地址 [data]:可选项表示发送到服务器的数据,其格式为 key/valu ...
- 【Asp.Net】IIS应用程序池添加ASP.NET v4.0
可能在安装.NET Framewrok 4.0之前,IIS就已经装好了,结果在IIS的应用程序池中只有.NET 2.0的Classic .NET AppPool和DefaultAppPool.在使用v ...
- Qt入门实例
一.基于Qt设计师 1.创建一个GUI项目,选择“Qt4 Gui Application”.其中还有Empty Qt4 Project(空的工程),Qt4 Console Applicaiton(基于 ...
- Qt Pro文件与Qt模块启用
看qt论坛中经常有人忘记 QT+=network 等语句.随便写写吧,或许对他人有帮助. 一.从哪开始呢 不妨先看个例子吧: #include <QtCore/QCoreApplication& ...
- BZOJ5288 & 洛谷4436 & LOJ2508：[HNOI/AHOI2018]游戏——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5288 https://www.luogu.org/problemnew/show/P4436 ht ...
- 解密百度图片URL
今天想爬百度图片搜索,但因为爬出来的链接乱七八糟,有些打不开,对于我这个完美主义者而言,这实在是太残酷,但我还是把爬虫过程的核心部分——解密URL给记录下来了. 下图是捕获的json数据的其中一条数据 ...
- Python数据处理和数据可视化
工具1:numpy 下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#numpy 入门文档:https://docs.scipy.org/doc/nump ...