Echarts 動態從後臺獲取資料進行圖表的展示
阿新 • • 發佈：2019-01-04
前端部分：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main"style="width: 800px; height: 300px"></div>
<!-- ECharts單檔案引入 -->
<script type="text/javascript"src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"src="build/dist/echarts.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths : {
echarts : 'build/dist'
}
});
// 使用
require(['echarts','echarts/chart/bar'// 使用柱狀圖就載入bar模組，按需載入
], function(ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
},
legend : {
data : []
},
xAxis : [ {
type : 'category',
data : []
} ],
yAxis : [ {
type : 'value'
} ],
series : []
};
$.ajax({
type : "POST",
url : "gettestdata",
dataType : "json",
success : function(result) {
//將從後臺接收的json字串轉換成json物件
var jsonobj = eval(result);
//給圖示標題賦值
option.legend.data = jsonobj.legend;
//讀取橫座標值
option.xAxis[0].data = jsonobj.axis;
var series_arr = jsonobj.series;
//驅動圖表生成的資料內容，陣列中每一項代表一個系列的特殊選項及資料
for(var i = 0; i < series_arr.length; i++) {
option.series[i] = result.series[i];
}
//過渡控制，隱藏loading（讀取中）
myChart.hideLoading();
// 為echarts物件載入資料
myChart.setOption(option);
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main"style="width: 800px; height: 300px"></div>
<!-- ECharts單檔案引入 -->
<script type="text/javascript"src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"src="build/dist/echarts.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths : {
echarts : 'build/dist'
}
});
// 使用
require(['echarts','echarts/chart/bar'// 使用柱狀圖就載入bar模組，按需載入
], function(ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
},
legend : {
data : []
},
xAxis : [ {
type : 'category',
data : []
} ],
yAxis : [ {
type : 'value'
} ],
series : []
};
$.ajax({
type : "POST",
url : "gettestdata",
dataType : "json",
success : function(result) {
//將從後臺接收的json字串轉換成json物件
var jsonobj = eval(result);
//給圖示標題賦值
option.legend.data = jsonobj.legend;
//讀取橫座標值
option.xAxis[0].data = jsonobj.axis;
var series_arr = jsonobj.series;
//驅動圖表生成的資料內容，陣列中每一項代表一個系列的特殊選項及資料
for(var i = 0; i < series_arr.length; i++) {
option.series[i] = result.series[i];
}
//過渡控制，隱藏loading（讀取中）
myChart.hideLoading();
// 為echarts物件載入資料
myChart.setOption(option);
}
});
});
</script>
</body>
</html>