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系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
随机推荐
- /proc/meminfo中meminfo的计算方法
/proc/meminfo里的可使用内存的计算没有那么简单,并不是简单的free和page cache的加和 free + pagecache 以此为基准 但是需要减去一些内存:首先要减去系统预留的内 ...
- 百度地图常用2.0使用以及调用js
/** * 生成一条路线 * @param {Object} baiduMap 百度地图的 map对象 * @param {Object} lineColor 线路颜色 * @param {Objec ...
- [计算机网络-应用层] FTP协议
文件传输协议:FTP 如下图所示:用户通过一个FTP用户代理与FTP交互.该用户首先提供远程主机的主机名,使本地主机的FTP客户机进程建立一个到远程主机FTP服务器进程的TCP连接.然后,该用户提供用 ...
- Bootstrap 按钮，图片，辅助类
Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a&g ...
- asp.net MVC 导出查询结果到Excel
首先在View视图中有一表单form,导出按钮<input class="btn export" type="button" value="导出 ...
- 关于"作数类型冲突: nvarchar 与 image 不兼容"的问题
数据库如果是Image类型,当执行插入语句时,如果插入的值是DBNull.Value时提示:操作数类型冲突: nvarchar 与 image 不兼容; 出现这个问题的原因是没有指定DbType的原因 ...
- POJ2891：Strange Way to Express Integers——题解
http://poj.org/problem?id=2891 题目大意: k个不同的正整数a1,a2,...,ak.对于一些非负m,满足除以每个ai(1≤i≤k)得到余数ri.求出最小的m. 输入和输 ...
- "HK"日常之冻结术
在那遥远的MSDN上,有那么一只被隐藏的函数,它掌管着Windows内核威力不容小觑~ 本教程仅作为学习研究,禁止其他用途! 富强.民主.文明.和谐, 自由.平等.公正.法治, 爱国.敬业.诚信.友善 ...
- 【数位DP】【SCOI2009】windy数
传送门 Description \(windy\)定义了一种\(windy\)数.不含前导零且相邻两个数字之差至少为\(2\)的正整数被称为\(windy\)数.\(windy\)想知道, 在\(A\ ...
- JavaScript截取中英文字符串
有时在显示某段文字的时候,可能会太长,影响我们页面的显示效果.如果仅是英文,那么我们可以用String.substring(start, end)函数就已经够用了.但是通常我们都会遇到既有英文,又有汉 ...