谈一谈我最近做统计的感受
统计页面,主要的目的就是对后台给的数据做一个好的展示。就不得不说一下,图标控件:
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);
})