欢迎使用CSDN-markdown编辑器

谈一谈我最近做统计的感受

统计页面，主要的目的就是对后台给的数据做一个好的展示。就不得不说一下，图标控件：

• [ Echarts ]

• [ Highcharts ]

• [ chart.js ]

---

Echarts

百度的Echarts，去年也有一些使用，只不过比较少，因为当时觉得自带的主题几级提示不符合我们的色调，颜色这种东西如果没有设计把控还是比较难的。但是，等待着Echarts3.0来了，我们团队觉得这个色系和操作符合我们的系统，于是将所有的产品都改成了Echarts，最开始使用的时候，也是require来请求某个图表的js进行使用，后来统一进行反而觉得复杂了，有重新走了直接调用的版本。接下来我说一下，我对Echarts里面常用option的意思。

Option

var option = {
      baseOption:{//用来放默认的配置属性
        title: {
          show:false,//是否显示图表的标题
          text: '',//图表的标题
          left:'center'//标题所在位置
        },
        tooltip: {//图表的提示工具
          show: true,//是否显示提示框
          formatter:'{b0}: {c0}<br />{b1}: {c1}'//提示框的展示形式，还可以写js方法做处理
        },
        legend: {//图例
          itemGap:5,//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
          data: ['图例1','图例2'],//假如下面series里还有名称的话要和图例的名称顺序保持一致
          bottom:'0%',
        },
        color:['#aaa','#bbbb'],//颜色配置，不管是什么图颜色从开始到结束的颜色值
        grid: {//图表的位置（好比一个div）
          left: '3%',//图表距离左侧3%
          right: '4%',//图表距离右侧3%
          bottom: '18%',//图表距离底部3%
          top:'12%',//图表距离上部3%
          containLabel: true//grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。
        },
        xAxis: [{
          type: 'category',//X为类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
          boundaryGap: false,//坐标轴两边留白也可写做 ['20%', '20%']
          axisLabel:{//坐标轴刻度标签的相关设置。
            interval:1,//坐标轴刻度标签的显示间隔
            rotate:20,//坐标轴名字旋转读书
          },
          data: ['数据1','数据2'],//类目的值
        }],
        yAxis: [{
          type: 'value'//X为数值轴
        }],
        series:[{
            type:'line',//图表类型，折线，bar，柱状等等,
            data:[{
                name:'图例1',//图例名字1
                value:[2,5]//[数据1的值，数据2的值]
               },{
                name:'图例2',//图例名字2
                value:[5,8]//[数据1的值，数据2的值]
           }]
        }]
      },
      media: [//用于响应式的图表的样式，东西跟上面的是一样的，不过多了一个query用来限制宽度高度
        {
          query: {
            maxWidth: 625,//宽度小于625时会走这里面的option设置，覆盖上面默认的
          },
          option:{
            title: {
              textStyle:{
                fontSize:13,//这是以图表的标题为例子
              }
            },
          }
        },
      ]
    };

hightchart.js和chart.js用到的少了，但是hightchars容易上手，照着他的实例来就没问题，这俩就不做解释了。

过程中遇到的问题

• 说个苹果上的问题，当你用了响应式布局以后，手机上会用着很卡顿，需要在css上加上一句

    body{ -webkit-text-size-adjust:none; -webkit-overflow-scrolling:touch;}
    /*这样就可以有效的解决掉，手机上卡的问题。*/

• 当数据繁重，需要处理多时，页面的请求会变得很慢，这时候就是需要队列来处理了

    (function($) {
        // 声明一个jquery空对象，这个对象用来存放我们的队列
        var ajaxOrder = $({});
        $.ajaxOrder = function( opts ) {
            var jqXHR,
                dfd = $.Deferred(),
                promise = dfd.promise();
            // 执行我们的ajax查询操作
            ajaxOrder.queue( doRequest );
            // 添加中断ajax方法
            promise.abort = function( statusText ) {
                // 判断ajax是否在运行,如果有正在运行ajax，就将其结束掉ajax
                if ( jqXHR ) {
                    return jqXHR.abort( statusText );
                }
                // 将执行完毕的ajax从队列中删除
                var queue = ajaxOrder.queue(),
                    index = $.inArray( doRequest, queue );
                // 判断队列中是否存在执行完毕ajax，如有就将其从队列中剔除
                if ( index > -1 ) {
                    queue.splice( index, 1 );
                }

                // 最后将ajax状态改为失败，rejectWith()作用相当于reject()
                dfd.rejectWith( ajaxOpts.context || opts, [ promise, statusText, "" ]);
                return promise;
            };
            // 执行我们的ajax查询操作方法
            function doRequest( next ) {
                jqXHR = $.ajax( opts )
                    .done( dfd.resolve )
                    .fail( dfd.reject )
                    .then( next, next );
            }
            return promise;
        };
        })(jQuery);
    //请求调用
    $.ajaxQueue({
        url: url,
        dataType: "json",
        timeout:5000,//超时5秒自动结束，并且返回status为timeout
    }).done(function(data){
          callback(data,id);
    }).fail(function(data){
          var _data = {
            status: "fail"
    }　　　
        if (data.statusText == 'timeout') {　　　　　
            _data.status = 'timeout';　　　　
        }
        callback(_data,id);
    })