echarts如何获取后端的值_Echarts 获取后台数据 使用后台数据展示 柱形图
后臺數據要以json格式返回
頁面:引用echarts.js , 然后data以ajax的數據請求并返回
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
ECharts$(document).ready(function(){
});
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基于準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
title: {
text: ''
},
legend: {
data:["姓名"]
},
xAxis : [
{
type : "category",
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步執行
url : "getUserJson",
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
if (result) {
for(var i=0;i
console.log(result[i].userName);
arr.push(result[i].userName);
}
console.log("arr=>"+arr);
}
},
error : function(errorMsg) {
alert("獲取圖表請求數據失敗!");
myChart.hideLoading();
}
})
return arr;
})()
}
],
yAxis : [
{
type : "value"
}
],
series : [
{
"name":"年齡",
"type":"bar",
"data":(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步執行
url : "getUserJson",
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
if (result) {
for(var i=0;i
console.log(result[i].age);
arr.push(result[i].age);
}
}
},
error : function(errorMsg) {
alert("獲取圖表請求數據失敗!");
myChart.hideLoading();
}
})
return arr;
})()
}
]
};
// 為echarts對象加載數據
myChart.setOption(option);
}
);
============================================================
總結
以上是生活随笔為你收集整理的echarts如何获取后端的值_Echarts 获取后台数据 使用后台数据展示 柱形图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 逆变器电路原理图(逆变器完整电路图)
- 下一篇： 割线法求解过程_潮流方程的割线法求解