ECharts實(shí)現(xiàn)數(shù)據(jù)可視化(2)——通過(guò)導(dǎo)入excel數(shù)據(jù)更新

在上回改模板做出的擅翰洌基圖笔喉,確實(shí)是簡(jiǎn)潔明了,直觀清晰硝皂,就是數(shù)據(jù)量大的時(shí)候比較麻煩常挚,而且考慮到日后常常會(huì)有這種桑基圖的需求稽物,流向可能更加復(fù)雜奄毡,數(shù)據(jù)也可能需要經(jīng)常更新,做出了讀取本地excel文件并在頁(yè)面顯示的功能贝或。

在做珊鸸基圖的時(shí)候,我所需要的是source ,target,value,這三個(gè)參數(shù)的值咪奖,這個(gè)根據(jù)不同的圖表盗忱,參數(shù)數(shù)量會(huì)有不同。

第一步:建excel源表

我根據(jù)自己的需求羊赵,將原本的excel表格精簡(jiǎn)到了如下樣子趟佃,源、目標(biāo)昧捷、值一一對(duì)應(yīng)闲昭。


TIM圖片20180723162231.png

第二步:下載需要的腳本文件

js解析Excel數(shù)據(jù)腳本:xlsx.full.min.js,自行下載靡挥。

第三步:讀取文件

var wb;//讀取完成的數(shù)據(jù)
var rABS = false; //是否將文件讀取為二進(jìn)制字符串

function importf(obj) {//導(dǎo)入
    if(!obj.files) {
        return;
    }
    var f = obj.files[0];
    var xlsxData = null;
    var reader = new FileReader(); //新建文件讀取對(duì)象
    reader.onload = function(e) {  //文件讀取完畢事件
        var data = e.target.result;
        if(rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {//手動(dòng)轉(zhuǎn)化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {
                type: 'binary'
            });
        }
        //以下為繪圖操作
        var dom = document.getElementById("container");//在html中定位繪圖位置
        var myChart = echarts.init(dom);//初始化繪圖對(duì)象
        option = null;
        option = {                      //繪圖設(shè)置選項(xiàng)序矩,主要操作這里
            series: {
            type: 'sankey',
            layout:'none',
            data: '',                   //有多少個(gè)點(diǎn),格式:[{name:''},{name:''}....] {}為json對(duì)象
            links: ''                   //點(diǎn)點(diǎn)之間連接關(guān)系跋破, 格式:[{source:'',target:'',value:''},{.....}....] {}為json對(duì)象 
            }
        };
        ;
        //wb.SheetNames[0]是獲取Sheets中第一個(gè)Sheet的名字
        //wb.Sheets[Sheet名]獲取第一個(gè)Sheet的數(shù)據(jù)
        xlsxData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//獲取excel中數(shù)據(jù)贮泞,以上操作相對(duì)固定
        option.series.links=xlsxData;                                    //數(shù)據(jù)賦值
        option.series.data=myUnique(xlsxData);                           //找出unique的對(duì)象作為點(diǎn)
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    };
    if(rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
    
}
function myUnique(obj){                                                //找出unique的對(duì)象
    var length = 0;
    var nameData = new Array();
    var uniqueCount = 0;
    length = obj.length;
    nameData[0]= new Object();//對(duì)象具有長(zhǎng)的周期楞慈,不能使用中間對(duì)象這種操作 需要每次再數(shù)組中新建對(duì)象
    nameData[0].name=obj[0].source;
    for(i=0;i<length;i++)
    {
        for(j=0;j<uniqueCount+1;j++){
            if(obj[i].source==nameData[j].name){
                break;
            }
            if(j==uniqueCount){
                uniqueCount++;
                nameData[uniqueCount]=new Object();
                nameData[uniqueCount].name=obj[i].source;
            }
        }
        for(j=0;j<uniqueCount+1;j++){
            if(obj[i].target==nameData[j].name){
                break;
            }
            if(j==uniqueCount){
                uniqueCount++;
                nameData[uniqueCount]=new Object();
                nameData[uniqueCount].name=obj[i].target;
            }
        }
    }
    return nameData;
}
function fixdata(data) { //文件流轉(zhuǎn)BinaryString
    var o = "",
        l = 0,
        w = 10240;
    for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}

第三步:導(dǎo)入本地文件并顯示

選擇本地的excel文件導(dǎo)入


image.png

顯示如下,數(shù)據(jù)沒有實(shí)際意義啃擦,


image.png

至此我們可以更新excel數(shù)據(jù)再導(dǎo)入刷新來(lái)實(shí)現(xiàn)數(shù)據(jù)的異步更新囊蓝,方便了不少。但是跳過(guò)導(dǎo)入文件這一步令蛉,直連數(shù)據(jù)庫(kù)會(huì)不會(huì)更加方便聚霜?我們?cè)谙乱黄鉀Q這一問題。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末珠叔,一起剝皮案震驚了整個(gè)濱河市蝎宇,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌祷安,老刑警劉巖姥芥,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異汇鞭,居然都是意外死亡凉唐,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門霍骄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)台囱,“玉大人,你說(shuō)我怎么就攤上這事读整〔狙担” “怎么了?”我有些...
    開封第一講書人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵米间,是天一觀的道長(zhǎng)强品。 經(jīng)常有香客問我,道長(zhǎng)屈糊,這世上最難降的妖魔是什么择懂? 我笑而不...
    開封第一講書人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮另玖,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘表伦。我一直安慰自己谦去,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開白布蹦哼。 她就那樣靜靜地躺著鳄哭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪纲熏。 梳的紋絲不亂的頭發(fā)上妆丘,一...
    開封第一講書人閱讀 51,692評(píng)論 1 305
  • 那天锄俄,我揣著相機(jī)與錄音,去河邊找鬼勺拣。 笑死奶赠,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的药有。 我是一名探鬼主播毅戈,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼愤惰!你這毒婦竟也來(lái)了苇经?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤宦言,失蹤者是張志新(化名)和其女友劉穎扇单,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奠旺,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蜘澜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了凉倚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片兼都。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖稽寒,靈堂內(nèi)的尸體忽然破棺而出扮碧,到底是詐尸還是另有隱情,我是刑警寧澤杏糙,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布慎王,位于F島的核電站,受9級(jí)特大地震影響宏侍,放射性物質(zhì)發(fā)生泄漏赖淤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一谅河、第九天 我趴在偏房一處隱蔽的房頂上張望咱旱。 院中可真熱鬧,春花似錦绷耍、人聲如沸吐限。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)诸典。三九已至,卻和暖如春崎苗,著一層夾襖步出監(jiān)牢的瞬間狐粱,已是汗流浹背舀寓。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留肌蜻,地道東北人互墓。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像宋欺,于是被迫代替她去往敵國(guó)和親轰豆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容