在上回改模板做出的擅翰洌基圖笔喉,確實(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這一問題。