百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> echarts+ajax+restful实现图表(bar/line)
分享文章到:

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

发布时间:01/15 来源: 浏览: 关键词:
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'); 
}
});

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有1人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板