echarts js 删除框选数据_echarts同一页面中四个图表切换的js数据交互方法示例
需求:
点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中。
其余的就不多说,直接上js代码了
示例代码:
$(function() {
$("#heart").on("click", function() {
$('.heart-car').show();
$('.sleep-car').hide();
$('.breathe-car').hide();
$('.sport-car').hide();
});
$("#breathe").on("click", function() {
$('.heart-car').hide();
$('.sleep-car').hide();
$('.breathe-car').show();
$('.sport-car').hide();
});
$("#sport").on("click", function() {
$('.heart-car').hide();
$('.sleep-car').hide();
$('.breathe-car').hide();
$('.sport-car').show();
});
$("#sleep").on("click", function() {
$('.heart-car').hide();
$('.sleep-car').show();
$('.breathe-car').hide();
$('.sport-car').hide();
});
/* 第一个图表 */
var aChart = echarts.init(document.getElementById("main"));
function aFun(x_data, y_data) {
aChart.setOption({
title: {
text: '睡眠质量监测'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: x_data
},
yAxis: {
splitLine: {
show: false
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
visualMap: {
top: 10,
right: 10,
pieces: [ {
gt: 0,
lte: 1,
color: '#ffde33'
}, {
gt: 1,
lte: 2,
color: '#ff9933'
}, {
gt: 2,
lte: 3,
color: '#cc0033'
}, {
gt: 3,
lte: 4,
color: '#660099'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: '睡眠',
type: 'line',
data: y_data,
markLine: {
silent: true,
data: [{
yAxis: 0
}, {
yAxis: 1
}, {
yAxis: 2
}, {
yAxis: 3
}, {
yAxis: 4
}]
}
}
});
}
/* 第二个图表 */
// 折线图
var bChart = echarts.init(document.getElementById("main2"));
function bFun(x_data, y_data) {
bChart.setOption({
color : [ '#3398DB' ],
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend : {
data : [ '心率值' ]
},
grid : {
left : '3%',
right : '20%',
bottom : '20%',
containLabel : true
},
xAxis : [ {
type : 'category',
data : x_data,
} ],
yAxis : [ { // 纵轴标尺固定
type : 'value',
scale : true,
name : '心率值',
max : 140,
min : 0,
splitNumber : 20,
boundaryGap : [ 0.2, 0.2 ]
} ],
series : [ {
name : '心率',
type : 'line',
data : y_data
} ]
}, true);
}
/* 第三个图表 */
// 折线图
var cChart = echarts.init(document.getElementById("main3"));
function cFun(x_data, y_data) {
cChart.setOption({
color : [ '#3398DB' ],
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend : {
data : [ '呼吸值' ]
},
grid : {
left : '3%',
right : '20%',
bottom : '20%',
containLabel : true
},
xAxis : [ {
type : 'category',
data : x_data,
} ],
yAxis : [ { // 纵轴标尺固定
type : 'value',
scale : true,
name : '呼吸值',
max : 50,
min : 0,
splitNumber : 20,
boundaryGap : [ 0.2, 0.2 ]
} ],
series : [ {
name : '呼吸',
type : 'line',
data : y_data
} ]
}, true);
}
/* 第四个图表 */
// 基于准备好的dom,初始化echarts实例
var dChart = echarts.init(document.getElementById('main4'));
// 指定图表的配置项和数据
function dFun(data) {
dChart.setOption({
tooltip: {
/*返回需要的信息*/
formatter: function(param) {
var value = param.value;
return '
'
';
}
},
xAxis: {
show : false,
type: 'time',
name: '时间轴',
},
yAxis: {
type: 'value',
name: '翻身',
max: 9,
min: 0,
},
series: [{
name: '',
data: data,
type: 'scatter',
symbolSize: 40
}]
});
}
$.ajax({
url : "/bison/stats/mattess/getDetail?id=" + $("#sid").val(),
async : false,
type : 'GET',
dataType : 'json',
success : function(data) {
var status = data.returnData.status;
status.echatX == ''?aFun("[]","[]"):aFun(status.echatX,status.echatY);
var hb = data.returnData.heartBreath;
if(hb.echatX == ''){
bFun("[]","[]");
cFun("[]","[]");
}else{
bFun(hb.echatX, hb.echatY);
cFun(hb.echatX, hb.echatY2);
}
var move = data.returnData.move;
dFun(move);
},
});
})
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
echarts js 删除框选数据_echarts同一页面中四个图表切换的js数据交互方法示例相关推荐
- echarts js 删除框选数据_ECharts进行区域选择
action.brush | * 区域选择相关的行为. action.brush.brush | * 触发此 action 可向 echarts 中添加一个或多个选框,例如:myChart ...
- echarts同一页面四个图表切换的js数据交互
需求:点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 图片.png 其余的就不多说,直接上js代码了 $(function() {$("#heart&qu ...
- .net dataGridView当鼠标经过时当前行背景色变色;然后【给GridView增加单击行事件,并获取单击行的数据填充到页面中的控件中】...
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
- 页面中php传值后循环列表js获取点击的id
页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...
- 使用该JavaBean可以将数据在JSP页面中以表格的形式显示出来 并具有动态排序 动态生成查询 自动分页功能
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 使用该类 ...
- 使用D3.js实现框选节点并进行多节点拖动
最近再使用d3.js关系图形展示时,需要选中多节点并进行拖动,一开始并不知道D3提供了此API,下面是我结合项目业务整理的框选操作的重点方面的应用. 这是d3提供的api:(使用鼠标或触摸选择一维或二 ...
- js 动态生成html(js根据后台返回数据生成html页面中的table标签)(转义字符)
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
- 【转】Vue.js入门教程(二)在页面中引入vue的方式
第二章:安装和基础效果展示 页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
- 用jQuery封装的Ajax把json数据展示到页面中去
实现一个聊天页面 我们下来看一下效果 图中的聊天信息先把它放在json数据中,通过jQuery封装的Ajax来把数据拿过来,再把它展示到页面中去,分为以下几步 为了方便操作,我们直接使用php stu ...
最新文章
- 美团应届生年薪达 35 万?究竟什么导致薪资倒挂?
- mobilenet精髓全力解析,全力迁移到别的网络
- 【ObjectC—浅copy和深copy】
- Zeppelin-源码编译
- apache 支持php urlmanager,Yii中urlManager的配置
- redis学习-redis入门概述及简介
- C语言curl实现FTP上传、下载、获取文件信息
- dll创建及调用(VS2005)
- (Unity4.7)assetbundle 坑爹总结
- 微信公众平台开发之微团购
- 原型对象prototype与继承
- centos7 定时清理内存
- JAVA8的一些写法
- 等保2.0测评综合得分计算
- linux电脑滚轮不能用,图文详解电脑鼠标滚轮不动了怎么办_电脑鼠标滚轮不能用的三种解决方法-系统城...
- mtk平台gsensor,msensor方向确定方法
- 华为手机鸿蒙系统测评,华为发布的鸿蒙系统到底有多牛(让理想成为现实)
- Ubuntu搭建CTFd平台实现动态靶机的过程
- WebLogic启动服务卡住报错 :Server started in RUNNING mode
- jieba分词词性标注含义
热门文章
- java htmldecoder_HTMLDecoder——开头的HTML编码的解码工具类(java)
- Java 和 HTTP 的那些事(四) HTTPS 和 证书
- Spring Boot 项目设置网站图标
- 杂谈:微服务的体系结构评审的三个问题
- Mybatis中 $ 和 # 千万不要乱用!
- html里range怎么改样式,CSS之修改input range样式 [ lion1ou ]
- java memcachedclient_Java memcached client怎样建立长连接
- 指纹浏览器 开源 linux,浏览器指纹--Canvas指纹
- 【alibaba-cloud】sentinel的使用
- c++ iou学习笔记