99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話:13121318867

登錄
首頁精彩閱讀關(guān)于數(shù)據(jù)可視化商業(yè)圖表工具ECharts背后那些事兒
關(guān)于數(shù)據(jù)可視化商業(yè)圖表工具ECharts背后那些事兒
2014-11-23
收藏

關(guān)于數(shù)據(jù)可視化商業(yè)圖表工具ECharts背后那些事兒

緣起

ECharts,縮寫來自Enterprise Charts,商業(yè)級數(shù)據(jù)圖表,它最初是為了滿足公司商業(yè)體系里各種業(yè)務系統(tǒng)(如鳳巢、廣告管家等等)的報表需求。以前這些系統(tǒng)的圖表需求我們都是使用flash去實現(xiàn)的,百度分工很細,有專門的flash組同學去做這個事情,這就不可避免多了一個溝通環(huán)節(jié),作為前端工程師無法獨立掌控,不管是數(shù)據(jù)接口的設計,個性化的需求都得溝通商定。而且一個系統(tǒng)內(nèi)會有很多個flash在不同場景下出現(xiàn),他們并沒有實現(xiàn)通用。加上喬幫主不讓i系列上運行flash以及html5的火熱,我們需要尋求一個解決方案。于是在2012年初,當時還是鳳巢前端技術(shù)負責人的Kener-林峰在鳳巢數(shù)據(jù)平臺項目中嘗試使用Canvas去做圖表,他寫了一個全新的輕量級Canvas類庫ZRender,那可以說是ECharts的原型,雖然跟現(xiàn)在已經(jīng)相去十萬八千里了。

ECharts官網(wǎng)>>>

百度資深前端Erik回歸后組建起了百度商業(yè)前端通用技術(shù)組,在前面提到的背景下加上前端團隊的經(jīng)理祖明的強力支持,數(shù)據(jù)可視化成為了通用技術(shù)里一個重要的研究方向, 林峰也就這樣順理成章的從鳳巢技術(shù)負責人轉(zhuǎn)到現(xiàn)在的角色,百度商業(yè)前端數(shù)據(jù)可視化團隊負責人。癡狂于web3d的技術(shù)天才沈毅,沉迷圖形圖像的楊驥,有SVG/GUI實戰(zhàn)經(jīng)驗的宿爽,對顏色如數(shù)家珍的陳懷木等等來自一線的工程師加入組建起了可視化團隊。

正如前面提到的,ECharts來自ZRender,那時的ZRender是包含圖表功能的,甚至拖拽重計算已經(jīng)在那個時候被實現(xiàn)了,但各種圖表數(shù)據(jù)邏輯與圖形渲染耦合,非模塊化,Demo時隨心所欲的特殊定制,我們意識到這是一個糟糕的設計。ZRender做了第一次大規(guī)模的重構(gòu),抽離了一切圖表相關(guān)功能,純粹的作為底層Canvas類庫使用。

而被抽離的圖表邏輯構(gòu)建成為ECharts 0.1版本,但基本仍舊屬于Demo狀態(tài),因為接口不規(guī)范,個性化能力和通用性都太差了。Erik和林峰,以及3位來自Flash組的資深工程師(百度商業(yè)系統(tǒng)中多年來所做的各種flash圖表基本出自他們或者是他們所帶領的團隊),花了近2個月時間先后開了6次會議終于制定并發(fā)布了百度圖表庫標準1.0版本。這份標準是在幾乎沒考慮實現(xiàn)成本的情況下制定的,追求設計的合理、高度個性化的擴展能力,可想而知,這是給團隊挖了一個很深很深的坑,在緊接著的近10個月時間里ECharts團隊就是看著文檔一步一步從這個坑里爬出來。

幸運的是我們真爬出來了,2013年6月30,ECharts發(fā)布了1.0版本,這份標準完全成為了ECharts 1.0的API文檔,而且我們還加入了更多的數(shù)據(jù)交互能力。雖然這份標準目前已經(jīng)成為了ECharts文檔的子集了,但它的重要性不容置疑,回過頭看這段歷程,我們衷心的感謝制定這份標準的5位工程師(林峰、趙庶、Erik、劉陽、楊冬),在我們看來接口設計的合理比起實現(xiàn)成本重要得多。

發(fā)展

ECharts緣起公司自身的業(yè)務需求,但開源使得它得以發(fā)展,雖然業(yè)界已經(jīng)有多如牛毛的JS圖表庫,但ECharts帶著顛覆性的功能設計和技術(shù)特征,發(fā)布后得到了業(yè)界高度關(guān)注和好評,迅速成為國內(nèi)數(shù)據(jù)可視化領域的“后起之秀”,先后在CSDN、ITEye、InfoQ、中國統(tǒng)計網(wǎng)、統(tǒng)計之都等主流技術(shù)媒體上有專題報道,被開源中國收錄后即被列為精選做了長達一周的首頁首位推薦,收藏數(shù)超過了1000,github上發(fā)布12個月后star數(shù)超過了1900,已經(jīng)成為了國內(nèi)同類別項目中關(guān)注度最高的開源項目。被百度外100多家企業(yè)應用在新聞傳媒、證券金融、電子商務、旅游酒店、天氣地理、視頻游戲、電力等眾多領域。

令我們意外的是,ECharts僅發(fā)布半年入選成為了“2013年國產(chǎn)開源軟件10大年度熱門項目”,同時在“2013年度最新的20大熱門開源軟件”中排名第一。除此之外,ECharts還得到了跨領域以及國外技術(shù)團體關(guān)注,如在R領域就同時出現(xiàn)國內(nèi)外多個版本的擴展,聽說還有兩家亞太地區(qū)金融咨詢企業(yè)正在研發(fā)基于ECharts的BI類產(chǎn)品,甚至還有人拿著ECharts跑到紐約市長數(shù)據(jù)分析部門做應用推廣。這都是我們的意外收獲,感謝大家的支持。

下面是ECharts部分圖表展示:

EChartsEChartsEChartsEChartsEChartsEChartsEChartsEChartsEChartsEChartsECharts


數(shù)據(jù)分析咨詢請掃描二維碼

若不方便掃碼,搜微信號:CDAshujufenxi

數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調(diào)用 initGeetest 進行初始化 // 參數(shù)1:配置參數(shù) // 參數(shù)2:回調(diào),回調(diào)的第一個參數(shù)驗證碼對象,之后可以使用它調(diào)用相應的接口 initGeetest({ // 以下 4 個配置參數(shù)為必須,不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺檢測極驗服務器是否宕機 new_captcha: data.new_captcha, // 用于宕機時表示是新驗證碼的宕機 product: "float", // 產(chǎn)品形式,包括:float,popup width: "280px", https: true // 更多配置參數(shù)說明請參見:http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計時完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請輸入'+oInput.attr('placeholder')+'!'; var errTxt = '請輸入正確的'+oInput.attr('placeholder')+'!'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }