上一節已經完講了背景的相關服務，現在以及可能接下來的講的是如何将資料傳輸到具體的圖形展示中。
首先來一個最簡單的，将x軸的資料從資料庫中取出：
我一向懶得傳圖，但是那樣不直覺，今天打破規矩好了，先見識一下資料表xasix：
非常簡單吧！
好下面我們先看展示圖再來看源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>line估</title>
<script src="js/esl.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
//ajax擷取背景資料，x軸的name從資料庫中讀取
function fetchXname(){
var arr=new Array();
$.ajax(
{
url:"./control/AjaxService.php?method=GetXaxisname",
dataType:"text",
success:function(data)
{
//調用函數擷取值，轉換成數組模式
var ss=eval(data);
for(var i=0;i<ss.length;i++)
{
arr.push(ss[i].name);
}
}
});
return arr;
}
function dataXRand(){
var dataarr=new Array();
$.ajax({
url:"./control/AjaxService.php?method=RandTest",
dataType:"text",
success:function(data)
{
var ss=eval(data);
for(var i=0;i<ss.length;i++)
{
dataarr.push(ss[i]);
//alert(dataarr[i]);
}
}
});
return dataarr;
}
require.config({
packages:[
{
name:'echarts',
location:'echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'zrender-master/src',
main:'zrender'
}
]
});
option = {
title : {
text: '未來一周氣溫變化',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高氣溫','最低氣溫']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : fetchXname()
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
},
splitArea : {show : true}
}
],
series : [
{
name:'最高氣溫',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:dataXRand()
},
{
name:'最低氣溫',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[-2, 1, 2, 5, 3, 2, 0]
}
]
};
require(
[
'echarts',
'echarts/chart/line'
],
function(ec){
var myChart=ec.init(document.getElementById('main'));
myChart.setOption(option);
}
)
</script>
</head>
<body>
<div id="main" style="height:500px; border:1px solid #ccc; padding:10px;"></div>
</body>
</html>