效果图
页面 HTML 代码
引入 echarts.js
和 jquery.js
库脚本代码。
<!DOCTYPE html>
<head>
<title>echarts</title>
<style>
* {
margin: 0%;
padding: 0%;
}
html,body {
width: 100%;
height: 100%;
}
#echarts {
height: 300px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="echarts"></div>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var mychartdd = echarts.init(document.getElementById('echarts'));
var seriesName1 = '活动一';
var seriesName2 = '活动二';
var seriesName3 = '活动三';
var seriesName4 = '活动四';
var seriesName5 = '活动五';
option = {
title: {
x: 'center',
y: 'top',
text: '',
subtext: '活动趋势图',
subtextStyle: {
fontWeight: 'bolder',
color: '#000'
}
},
legend: {
x: 'center',
y: 'top',
data: [seriesName1, seriesName2, seriesName3, seriesName4, seriesName5]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: false,
feature: {
saveAsImage: { show: false }
}
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: seriesName1,
type: 'line',
data: []
},
{
name: seriesName2,
type: 'line',
data: []
},
{
name: seriesName3,
type: 'line',
data: []
},
{
name: seriesName4,
type: 'line',
data: []
},
{
name: seriesName5,
type: 'line',
data: []
}
]
};
mychartdd.setOption(option);
$(function(){
var SoilTemp1 = [], SoilTemp2 = [], SoilTemp3 = [], SoilTemp4 = [], SoilTemp5 = [];// Y坐标值
var TM = [];// x坐标值:时间
mychartdd.showLoading({ text: "图表数据正在努力加载..." });
$.ajax({
type: "GET",
// 请求地址
url: "http://localhost:8080/proj/echarts/getAll",
success: function (ret) {
var date = ret;
if (date == null) {
mychartdd.showLoading({ text: "未获取到数据,请选择正确的时间..." });
}
for (var i = 0; i < date.length; i++) {
TM.push(date[i].DATE);
SoilTemp1.push(date[i].TYPE_1);
SoilTemp2.push(date[i].TYPE_2);
SoilTemp3.push(date[i].TYPE_3);
SoilTemp4.push(date[i].TYPE_4);
SoilTemp5.push(date[i].TYPE_5);
}
mychartdd.hideLoading(); //隐藏加载动画
mychartdd.setOption({ //加载数据图表
tooltip: {
trigger: 'axis'
},
toolbox: {
show: false,
feature: {
saveAsImage: { show: false }
}
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false,
data: TM
},
yAxis: {},//注意一定不能丢了这个,不然图表Y轴不显示
series: [
{
name: seriesName1,
type: 'line',
data: SoilTemp1
},
{
name: seriesName2,
type: 'line',
data: SoilTemp2
},
{
name: seriesName3,
type: 'line',
data: SoilTemp3
},
{
name: seriesName4,
type: 'line',
data: SoilTemp4
},
{
name: seriesName5,
type: 'line',
data: SoilTemp5
}
]
});
}
});
});
</script>
</body>
</html>
Java 代码
@RequestMapping("/echarts/getAll")
@ResponseBody
public List<HashMap<String, Object>> echartsJson() {
List<HashMap<String, Object>> retList = new ArrayList<>();
Random random = new Random();
for (int i = 1; i <= 7; i++) {
HashMap<String, Object> map = new HashMap<>();
map.put("DATE", "2020110" + i);
map.put("TYPE_1", random.nextInt(100));
map.put("TYPE_2", random.nextInt(100));
map.put("TYPE_3", random.nextInt(100));
map.put("TYPE_4", random.nextInt(100));
map.put("TYPE_5", random.nextInt(100));
retList.add(map);
}
return retList;
}
参考地址:
https://www.cnblogs.com/benmumu/p/8316652.html
https://echarts.apache.org/examples/zh/editor.html?c=line-stack