echarts數據自我定製（二）

時間 2020-10-06

標籤 javascript php html java jquery ajax 數據庫數組 echarts ide 欄目 JavaScript 简体版

原文原文鏈接

上一節已經完講了後臺的相關服務，如今以及可能接下來的講的是如何將數據傳輸到具體的圖形展現中。javascript

首先來一個最簡單的，將x軸的數據從數據庫中取出：php

我一貫懶得傳圖，可是那樣不直觀，今天打破規矩好了，先見識一下數據表xasix：html

很是簡單吧！java

好下面咱們先看展現圖再來看源代碼：jquery

源代碼來啦~ajax

<!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>

細心的童鞋發現其實曲線中的數據也是一樣的方法取出來的，對伐？見dataXRand()數據庫

而後我想將不一樣類型的，最近本身試驗出來的成功都貼出來，供本身記錄，也共勉。數組