textStyle: { //图例文字的样式
color: '#fff',
fontSize: 16
},
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div>
<script>
// 折线图
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
console.log(JSON.stringify(data))
hrFun(data.echatX, data.echatY);
},
});
var myChart = echarts.init(document.getElementById("main"));
function hrFun(x_data, y_data) {
myChart.setOption(option = {
title: {
text: 'Beijing AQI'
},
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,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 16
},
pieces: [{
gt: 0,
lte: 1,
label: '活动',
color: '#096'
}, {
gt: 1,
lte: 2,
label: '浅睡',
color: '#ffde33'
}, {
gt: 2,
lte: 3,
label: '深睡',
color: '#ff9933'
}, {
gt: 3,
lte: 4,
label: '熟睡',
color: '#cc0033'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: '睡眠状态',
type: 'line',
data: y_data,
//虚线
// markLine: {
// silent: true,
// data: [{
// yAxis: 1
// }, {
// yAxis: 2
// }, {
// yAxis: 3
// }, {
// yAxis: 4
// }]
// }
}
});
}
</script>
</body>
</html>
json数据
格式是数组对象的时候
{
"echatX": ["2020-11-17 14:47:18", "2020-11-17 14:49:44", "2020-11-17 14:52:11", "2020-11-17 14:54:36",
"2020-11-17 14:57:01", "2020-11-17 14:59:28", "2020-11-17 15:01:55", "2020-11-17 15:04:23", "2020-11-17 15:06:51",
"2020-11-17 15:09:20", "2020-11-17 15:11:44", "2020-11-17 15:14:10", "2020-11-17 15:16:38", "2020-11-17 15:19:01",
"2020-11-17 15:21:26", "2020-11-17 15:23:53", "2020-11-17 15:26:20", "2020-11-17 15:28:47", "2020-11-17 15:31:14",
"2020-11-17 15:33:41", "2020-11-17 15:36:09", "2020-11-17 15:38:38", "2020-11-17 15:41:07", "2020-11-17 15:43:35",
"2020-11-17 15:46:01", "2020-11-17 15:48:25", "2020-11-17 15:50:52", "2020-11-17 15:53:20", "2020-11-17 15:55:55",
"2020-11-17 15:58:35", "2020-11-17 16:01:04", "2020-11-17 16:01:19", "2020-11-17 16:03:49", "2020-11-17 16:04:05",
"2020-11-17 16:06:34", "2020-11-17 16:06:50", "2020-11-17 16:09:17", "2020-11-17 16:09:32", "2020-11-17 16:11:56",
"2020-11-17 16:12:13", "2020-11-17 16:14:38", "2020-11-17 16:14:54", "2020-11-17 16:17:20", "2020-11-17 16:17:37",
"2020-11-17 16:20:02", "2020-11-17 16:20:18", "2020-11-17 16:22:51", "2020-11-17 16:23:10", "2020-11-17 16:25:43",
"2020-11-17 16:26:00", "2020-11-17 16:28:26", "2020-11-17 16:28:43", "2020-11-17 16:31:07", "2020-11-17 16:31:24",
"2020-11-17 16:33:58", "2020-11-17 16:34:17"
],
"echatY": [1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
3, 2, 2, 2, 2, 2, 2, 4, 4, 4, 4, 4, 4, 3, 3, 4, 4, 4, 4
],
"echatY2": null
}
