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()数据库

而后我想将不一样类型的，最近本身试验出来的成功都贴出来，供本身记录，也共勉。数组