echarts交互php,echarts同一页面中四个图表切换的js数据交互方法-CSDN博客

这篇文章主要给大家介绍了关于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: {

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 '

' + value[0] + " 翻身"

}

xAxis: {

show : false,

type: 'time',

yAxis: {

type: 'value',

max: 9,

min: 0,

series: [{

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);

});

})

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！