ajax php 折线涂,Echarts+ajax实现一个简单折线图

// 折线图

$.ajax({

url: "test.json",

data: {},

type: 'GET',

success: function(data) {

console.log(JSON.stringify(data))

hrFun(data.echatX, data.echatY);

},

});

// 心率

var hrChart = echarts.init(document.getElementById("main"));

function hrFun(x_data, y_data) {

hrChart.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: '心率值',

min : 0, // 就是这两个 最小值

max : 'dataMax', // 最大值

splitNumber: 20,

boundaryGap: [0.2, 0.2]

}],

series: [{

name: '心率',

type: 'line',

data: y_data

}]

}, true);

}

json数据

{

"echatX": ["2020-11-18 00:08:36", "2020-11-18 00:18:42", "2020-11-18 00:28:46", "2020-11-18 00:38:33",

"2020-11-18 00:48:43", "2020-11-18 00:58:36", "2020-11-18 01:08:40", "2020-11-18 01:18:36", "2020-11-18 01:28:42",

"2020-11-18 01:38:39", "2020-11-18 01:48:45", "2020-11-18 01:58:35", "2020-11-18 02:08:34", "2020-11-18 02:18:32",

"2020-11-18 02:28:38", "2020-11-18 02:38:37", "2020-11-18 02:48:44", "2020-11-18 02:58:49", "2020-11-18 03:08:38",

"2020-11-18 03:18:42", "2020-11-18 03:28:35", "2020-11-18 03:38:44", "2020-11-18 03:48:35", "2020-11-18 03:58:50",

"2020-11-18 04:08:40", "2020-11-18 04:18:46", "2020-11-18 04:28:48", "2020-11-18 04:38:46", "2020-11-18 04:48:35",

"2020-11-18 04:58:46", "2020-11-18 05:08:38", "2020-11-18 05:18:34", "2020-11-18 05:28:46", "2020-11-18 05:38:35",

"2020-11-18 05:48:41", "2020-11-18 05:58:38", "2020-11-18 06:08:41", "2020-11-18 06:18:49", "2020-11-18 06:28:46",

"2020-11-18 06:38:43", "2020-11-18 06:48:40", "2020-11-18 06:58:47", "2020-11-18 07:08:36", "2020-11-18 07:18:35",

"2020-11-18 07:28:51", "2020-11-18 07:38:45", "2020-11-18 07:48:39", "2020-11-18 07:58:42", "2020-11-18 08:08:51",

"2020-11-18 08:18:37", "2020-11-18 08:28:43", "2020-11-18 08:38:46", "2020-11-18 08:48:54", "2020-11-18 08:58:52",

"2020-11-18 09:08:51", "2020-11-18 09:18:36", "2020-11-18 09:28:41", "2020-11-18 09:38:42", "2020-11-18 09:48:48",

"2020-11-18 09:58:52", "2020-11-18 10:08:48", "2020-11-18 10:18:38", "2020-11-18 10:28:49", "2020-11-18 10:38:44",

"2020-11-18 10:48:37", "2020-11-18 11:08:49", "2020-11-18 11:18:49"

],

"echatY": [80, 112, 90, 91, 104, 99, 107, 106, 121, 105, 106, 109, 102, 79, 81, 64, 70, 89, 108, 86, 62, 60, 74, 71,

112, 89, 81, 117, 90, 62, 90, 100, 99, 104, 103, 93, 113, 114, 74, 86, 115, 80, 119, 113, 96, 104, 111, 98, 93, 101,

93, 101, 60, 78, 79, 93, 69, 98, 124, 104, 108, 100, 104, 74, 100, 102, 75

],

"echatY2": []

}

图片.png