简单的数据可视化，并加入了animation动态效果

function dataChart(dataObj){
var style = document.createElement('style');
style.type = 'text/css';
var maxNum=Math.max.apply(null, dataObj.data);
var ppt=parseInt(maxNum/100);
for(var i=0;i<dataObj.data.length;i++){
var pptOf;
if(dataObj.data[i]==maxNum){
pptOf=220;
}else{
pptOf=parseInt(dataObj.data[i]/ppt*2.2);
}
var dataHTML='<div class="data-item">';
dataHTML+='<span><span class="data-year">'+dataObj.year[i]+'</span>'
dataHTML+='<span class="data-bar" style="width:'+pptOf+'px;animation:dataBar'+i+' 2s;-webkit-animation:dataBar'+i+' 2s; "></span></span>';
dataHTML+='<span class="data-msg"><b>'+dataObj.data[i]+'</b>条</span>';
dataHTML+='</div>';

var  rule = "@-webkit-keyframes dataBar"+i+"{0% {width:0;}100%{width:"+pptOf+"px}}"+
"@keyframes dataBar"+i+"{0% {width:0;}100%{width:"+pptOf+"px}}";
style.innerHTML += rule;
document.getElementsByTagName('head')[0].appendChild(style);
this.stylesheet = document.styleSheets[document.styleSheets.length-1];
try {
this.stylesheet.insertRule( rule , this.stylesheet.rules.length);
} catch (e) {
};

$("#dataStatisticsBox-body").append(dataHTML);
}
}

效果：

调用接口

dataChart({//数据统计接口
year:[2013,2014,2015,2016,2017],
data:[5542,3215,995,4551,2235]
});