-
<!DOCTYPE html>
-
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
-
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
-
<meta charset="utf-8">
-
<head th:include="include :: header"></head>
-
<body class="gray-bg">
-
<div id="main" style="width: 600px; height: 400px;"></div>
-
<script th:src="@{/js/jquery.min.js}"></script><!-- 引入你自己的jquery -->
-
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script><!-- 这个你没有直接就删掉 -->
-
<script th:src="@{/js/plugins/echarts.js}"></script><!-- 引入echarts,路径你自己的,别看我的 -->
-
<script th:inline="javascript">
-
// 基于准备好的dom,初始化echarts实例
-
var prefix = "/monitor/operlog"
-
//初始化
-
var myChart = echarts.init(document.getElementById('main'));
-
// 显示标题,图例和空的坐标轴
-
myChart.setOption({
-
title : {
-
text : 'ECharts'
-
},
-
tooltip : {
-
show : true
-
},
-
legend : {
-
data : [ '销量' ]
-
},
-
xAxis : {
-
data : []
-
},
-
yAxis : {},
-
series : [ {
-
name : '销量',
-
type : 'line',//图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示,具体类型可进入ECharts官方查找API
-
data : []
-
} ]
-
});
-
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
-
var names = []; //类别数组(实际用来盛放X轴坐标值)
-
var nums = []; //销量数组(实际用来盛放Y坐标值)
-
$.ajax({
-
type : "post",
-
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
-
url : prefix + "/discount1", //请求发送到Controller处,路径我上面写好了的,直接拼的,你自己按照你的写
-
data : {},
-
dataType : "json", //返回数据形式为json
-
success : function(result) {
-
//请求成功时执行该函数内容,result即为服务器返回的json对象
-
if (result) {
-
for (var i = 0; i < result.length; i++) {
-
names.push(result[i].name); //挨个取出类别并填入类别数组
-
}
-
for (var i = 0; i < result.length; i++) {
-
nums.push(result[i].num); //挨个取出销量并填入销量数组
-
}
-
myChart.hideLoading(); //隐藏加载动画
-
myChart.setOption({ //加载数据图表
-
xAxis : {
-
data : names
-
},
-
series : [ {
-
// 根据名字对应到相应的系列
-
name : '销量',
-
data : nums
-
} ]
-
});
-
}
-
},
-
error : function(errorMsg) {
-
//请求失败时执行该函数
-
alert("图表请求数据失败!");
-
myChart.hideLoading();
-
}
-
})
-
</script>
-
</body>
-
</html>
React16.4 开发简书项目 从零基础入门到实战课程
猜你喜欢
转载自blog.csdn.net/sb152866/article/details/81393923
今日推荐
周排行