在上回改模板做出的擅翰洌基圖笔喉，確實(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