指引网

当前位置: 主页 > 网页制作 > JavaScript >

echarts+ajax+restful实现图表(bar/line)

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:31
[摘要]  echarts+ajax+restful实现图表效果我们作法相当的简单了,今天我们来看一篇关于echarts+ajax+restful实现图表的例子,具体的如下文介绍。

先看效果图:

基本的js引用:

 代码如下 复制代码

<script type="text/javascript" src="js/esl/esl.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

2、创建一个div用来展示图表,需给定高度

 代码如下 复制代码

<div id="main" style="height:800px"></div>

3、配置路径及js的引用

 代码如下 复制代码


// 路径配置
require.config({
    paths: {
    echarts: 'js'
    }
});
// 使用
require(
[
    'echarts',
    'echarts/chart/bar',
    'echarts/chart/line'
],


 

4、echarts配置js:

 代码如下 复制代码


var option = {
//设置标题
    title:{
    text:'',
    subtext:''
    },
      tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器,坐标轴触发有效
          type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
      }
      },
      legend: {
      data:[]
      },
      toolbox: {
      show : true,
      feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore : {show: true},
          saveAsImage : {show: true}
      }
      },
calculable : true,
yAxis : [
     {
         type : 'value'
     }
     ],
     xAxis : [
          {
          type : 'category',
          data : []
          }
      ],
series : [
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      }
]
};

5、ajax+restful获取服务器端的数据

 代码如下 复制代码

$.ajax({
type:'get',//jquey是不支持post方式跨域的
async:false,
url:"http://10.130.2.245:9088/dailyAll?limit=25", //跨域请求的URL
dataType:'<a href="" class="keylink" title=" JSONP" target="_blank">JSONP</a>',
jsonp: "callback",//服务端用于接收callback调用的function名的参数 
success : function(result){ 
    if (result) {
       option.title.text = "("+result.titles+")堆积图";
       option.title.subtext = result.titles;
       option.legend.data = result.titles;
       
       option.xAxis[0].data = result.days;
       
       option.series[0].name = result.titles[0];
       option.series[0].data = result.pvcnts;
       
       option.series[1].name = result.titles[1];
       option.series[1].data = result.hundsuncnts;
       
       option.series[2].name = result.titles[2];
       option.series[2].data = result.apputrackcnts;
       
       option.series[3].name = result.titles[3];
       option.series[3].data = result.utrackcnts;
       
       option.series[4].name = result.titles[4];
       option.series[4].data = result.mobilelogcnts;
       
       option.series[5].name = result.titles[5];
       option.series[5].data = result.dratiocnts;
       myChart.setOption(option);
    }
}, 
error:function(){ 
    alert('fail'); 
}
});

------分隔线----------------------------