现在位置首页 / 前端开发 /正文

完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

作者: IT小兵 | 2017年7月31日| 热度:℃ | 评论: |参与:

1.前言 
百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了。今天呢。主要是跟小白讲一下,如何用ajax+百度Echarts实现我们动态数据的绑定呢? 
2.详情 
写一个很全的demo.接口的url自己换,数据结构自己换。

1.引入百度echarts库

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xGF99mjQcACk1Ctv50lXs0QOqdHiZml1"></script>

2.html内容

<div class="match_echart cleanfloat">                     
     <div id="chart1" style='margin-right:1%' ></div>
     <div id="chart2" ></div>
 </div>

3.css样式

/*定义宽高度*/
.match_echart>div{width:48%; height:400px;float:left; border:1px solid #d1d1d1;}/*清浮动*/
.cleanfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;}

4.js代码

//初始化
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
//用ajax获取数据填充
function chartFun() {
    /*分类饼图*/
    $.ajax({
        url: url1,//请换成自己的url
        success: function (result) {
            //换成自己的数据结构              
            var high = result.high;                       
            var low = result.low;                     
            var middle = result.middle;                                          
            option1.series[0].data.push({ value: high, name: "高度" }, { value: middle, name: "中度" }, { value: low, name: '低度' });
             chart1.setOption(option1);                
            }        
         })
    /*分类柱状图*/
    $.ajax({
        url: url2,//请换成自己的url
        success: function (result) {
            //换成自己的数据结构        
            for (var i = 0; i < result.list.length; i++) {
                var column =result.list[i].column;
                var num = result.list[i].num;
                option2.series[0].data.push({ value: num, name: column });
                option2.xAxis[0].data.push(column);   
              }                                 
           chart2.setOption(option2);                           
        }
    })
  }
//调用方法
$(function(){
    chartFun()
});
//根据窗口大小自适应图表
window.addEventListener("resize", function () {
    chart1.resize();
    chart2.resize();
});

5.效果展示 

4.总结 
这种demo在项目需求应用中应该是简单的不能再简单的了,很多童鞋的需求肯定不是酱紫的,好吧,如果你是小白,这个会了,稍微难的或者更难的都不会难倒你的。总之,掌握了其方法就会了。我这个写的是很菜,好吧,我承认我技术不照,学无止境!


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询