将html的echarts导入excel,ECharts实现数据可视化（2）——通过导入excel数据更新

在上回改模板做出的桑基图，确实是简洁明了，直观清晰，就是数据量大的时候比较麻烦，而且考虑到日后常常会有这种桑基图的需求，流向可能更加复杂，数据也可能需要经常更新，做出了读取本地excel文件并在页面显示的功能。

在做桑基图的时候，我所需要的是source ,target,value,这三个参数的值，这个根据不同的图表，参数数量会有不同。

第一步:建excel源表

我根据自己的需求，将原本的excel表格精简到了如下样子，源、目标、值一一对应。

TIM图片20180723162231.png

第二步：下载需要的脚本文件

js解析Excel数据脚本：xlsx.full.min.js，自行下载。

第三步：读取文件

var wb;//读取完成的数据

var rABS = false; //是否将文件读取为二进制字符串

function importf(obj) {//导入

if(!obj.files) {

return;

}

var f = obj.files[0];

var xlsxData = null;

var reader = new FileReader(); //新建文件读取对象

reader.onload = function(e) { //文件读取完毕事件

var data = e.target.result;

if(rABS) {

wb = XLSX.read(btoa(fixdata(data)), {//手动转化

type: 'base64'

});

} else {

wb = XLSX.read(data, {

type: 'binary'

});

}

//以下为绘图操作

var dom = document.getElementById("container");//在html中定位绘图位置

var myChart = echarts.init(dom);//初始化绘图对象

option = null;

option = { //绘图设置选项，主要操作这里

series: {

type: 'sankey',

layout:'none',

data: '', //有多少个点，格式：[{name:''},{name:''}....] {}为json对象

links: '' //点点之间连接关系， 格式：[{source:'',target:'',value:''},{.....}....] {}为json对象

}

};

;

//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字

//wb.Sheets[Sheet名]获取第一个Sheet的数据

xlsxData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//获取excel中数据，以上操作相对固定

option.series.links=xlsxData; //数据赋值

option.series.data=myUnique(xlsxData); //找出unique的对象作为点

if (option && typeof option === "object") {

myChart.setOption(option, true);

}

};

if(rABS) {

reader.readAsArrayBuffer(f);

} else {

reader.readAsBinaryString(f);

}

}

function myUnique(obj){ //找出unique的对象

var length = 0;

var nameData = new Array();

var uniqueCount = 0;

length = obj.length;

nameData[0]= new Object();//对象具有长的周期，不能使用中间对象这种操作 需要每次再数组中新建对象

nameData[0].name=obj[0].source;

for(i=0;i

{

for(j=0;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

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) { //文件流转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;

}

第三步：导入本地文件并显示

选择本地的excel文件导入

image.png

显示如下，数据没有实际意义，

image.png

至此我们可以更新excel数据再导入刷新来实现数据的异步更新，方便了不少。但是跳过导入文件这一步，直连数据库会不会更加方便？我们在下一篇解决这一问题。