效果图
html代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('可视化列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12">
<div class="ibox-content">
<div id="lineEcharts" class="echarts"></div>
</div>
</div>
</div>
</div>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script th:inline="javascript">
var prefix = ctx + "gwc/oms";
//折线图
$(document).ready(function () {
//初始化ehcharts实例
var lineChart = echarts.init(document.getElementById("lineEcharts"));
//数据加载完之前先显示一段简单的loading动画
lineChart.showLoading();
//指定图表的配置项和数据
/*var names = []; //类别数组(实际放x轴坐标值)*/
/*var nums = []; //销量数组(Y坐标值)*/
$.ajax({
type: "post",
async: "true",//异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: prefix + "/syzs",
data: {},
dataType: "json",
success: function (result) {
console.log(result)
lineChart.hideLoading();//隐藏加载动画
lineChart.setOption({//加载数据图表
title: {
text: '往日七天交易金额',
},
//工具箱
//保存图片
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
//图例-每一条数据的名字叫销量
legend: {
data: ['金额']
},
tooltip: {
trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
//x轴
xAxis: {
type: 'category',
boundaryGap: false,
data: result.name
},
//y轴没有显式设置,根据值自动生成y轴
yAxis: {
type: 'value'
},
//数据-data是最终要显示的数据
series: [{
name: '金额',
type: 'line',
data: result.num,
markPoint:{
data:[
{type:'money',name:'交易金额'}
]
}
}]
})
},
error: function (errorMsg) {
alert("图表请求数据失败");
lineChart.hideLoading();
}
})
})
</script>
</body>
</html>
后端主要将参数封装到AJAX中的result当中通过直接要设定的X轴