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系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
随机推荐
- KMP算法字符串查找子串
题目: 经典的KMP算法 分析: 和KMP算法对应的是BF算法,其中BF算法时间复杂度,最坏情况下可以达到O(n*m),而KMP算法的时间复杂度是O(n + m),所以,KMP算法效率高很多. 但是K ...
- [socket编程] 一个服务器与多个客户端之间通信
转自:http://blog.csdn.net/neicole/article/details/7539444 并加以改进 Server程序: // OneServerMain.cpp #includ ...
- JavaScript Array 类型
除 Object类型外,Array 类型算是ECMAScript中最常用的类型了,而且,ECMAScript中的数组和其他多数语言的数组有着非常大的差别,虽然这些数组都是数据的有序列表,但与其他语言不 ...
- RT-thread内核之定时器管理
一.前言 rt-thread采用软件定时器线程模式或硬件定时器中断模式来实现系统定时器管理.而rt-thread操作系统在默认情况下是采用的硬件定时器中断模式的方式,用户可以通过宏定义RT_USING ...
- C# 面向对象——多态
多态分三种:1.虚方法 2.抽象类 3.接口 1.虚方法1.将父类的方法标记为虚方法 ,使用关键字 virtual,这个函数可以被子类重新写一个遍. 如: class Program { static ...
- CentOS 设置环境变量
1. 查看环境变量,echo 命令用于在终端输出字符串或变量提取后的值,格式为“echo [字符串 | $变量]” echo $PATH /usr/local/bin:/usr/bin:/usr/lo ...
- bzoj3709: [PA2014]Bohater 贪心
~~~题面~~~ 题解: 首先有一个比较明显的策略,肯定先要把能带给自己受益的先选完,然后再以最佳状态去打那些会给自己带来损失的怪. 对于前一部分(可以带来受益的怪),显然我们需要先从代价小的打起,因 ...
- P2672 推销员 优先队列 + 贪心
---题面--- 题解: 我会说我想这道普及组题都想了好久么.... 不熟练的普及组选手.jpg 最后随便猜了一个结论居然是对的... 放结论: 假设x = i的最优决策为f[i], 那么f[i + ...
- 【BZOJ4066】简单题（KD-Tree）
[BZOJ4066]简单题(KD-Tree) 题面 BZOJ 题解 如果这题不卡空间,并且不强制在线的话 显然可以用\(CDQ\)分治做 但是它又卡空间又强制在线,于是我们欢快的来用\(KD-Tree ...
- BZOJ2038：[2009国家集训队]小Z的袜子——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2038 Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找 ...