最近由于一个特殊的需求，需要利用js读取本地json，然后再通过Echarts可视化出来。之前没有做过js读写本地文件的实验，幸亏看到一位大佬已经有做过这方面的工作，详情请移步这里：使用HTML5来实现本地文件读取和写入。
1. 文件读取
在HTML5中可以利用FileReader实现文件读取，html代码如下：
<div>
<input type="file" id="files" style="display:none" οnchange="import();"/>
<input type="button" id="import" value="导入"/>
</div>
首先需要一个file类型的input元素，这里为啥要display:none呢？
因为这个东西太丑了，所以将其隐藏，通过定义一个button间接调用该元素，真的是大佬，这样的想法都能想到。JS代码如下：
//点击导入按钮，使files触发点击事件，然后完成读取文件的操作。
$("#import").click(function(){
$("#files").click();
});
function import(){
//获取文件浏览器选择的文件对象
var selectedFile = document.getElementById("files").files[0];
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:"+name+"大小："+size);
//FileReader可以被Chrome、FF和Safari支持
var reader = new FileReader();
reader.readAsText(selectedFile);//读取文件的内容
//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
reader.onload = function(){
console.log(this.result);
};
}
这样，读取本地文件的操作就完成了。虽然ActiveXObject也可以，但是，目前只在IE中才能使用，所以为了兼容其他浏览器，还是不要这样使用了。
2. 写入文件
在HTML5中，与FileReader相对应的也有一个FileWriter。但是，没有找到一个可以用的FileWriter的API，而且似乎只有被Chrome支持。
//首先导入一个Js文件
<script type="text/javascript" src="./JS/FileSaver.js" charset="utf-8"></script>
//HTML中添加一个导出元素
<input type="button" id="export" value="导出"/>
//JS文件
$("#export).click(function(){
var content = "这是直接使用HTML5进行导出的";
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "file.txt");//saveAs(blob,filename)
});
3. js读取本地json文件并可视化
真心向大家推荐echarts，真的很漂亮，不信可以移步至：echarts官网实例。
对于非专业的变成人员，也提供了类似于excel的数据可视化接口，并且看着比excel更加美观，这一功能隐藏在ECharts数据可视化实验室中，请点击：传送门。
接着，点击开始制作即可通过鼠标点击的方式创建图表了。
这里，笔者采用的是echarts进行数据的可视化的，下面演示的是绘制桑葚图的过程。比较简单，只是为了出图，所以直接写的静态网页，然后数据定义在一个单独的json文件，动态地加载该文件。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<input type="file" id="files" style="display:none"/>
<button id="openFile" onclick="openJsonFile()">打开Json文件</button>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
function openJsonFile(){
$('#files').click();
//读取本地的json数据
var inputElement = document.getElementById("files");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:"+name+"大小："+size);
var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
reader.readAsText(selectedFile);//读取文件的内容
reader.onload = function(){
console.log("读取结果：", this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
console.log("解析JSON并可视化");
let json = JSON.parse(this.result);
helloEcharts(json);
};
}
}
//可视化桑葚图
function helloEcharts(data){
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = {
title: {
text: 'Sankey Diagram'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: data.nodes,
links: data.links,
focusNodeAdjacency: 'allEdges',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#aaa'
}
},
lineStyle: {
normal: {
color: 'source',
curveness: 0.5
}
}
}
]
};
myChart.setOption(option);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>
</body>
</html>
4. CDN加速
我们知道，对于一个网站来说，网站的访问速度对于用户的访问体验来说是非常重要的。CDN全称为内容分发网络，其主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。
CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源。CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。
再向大家推荐一个免费的bootstrap等前端框架的CDN加速服务：BootCDN。
BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。其共收录了 3442 个前端开源项目，为各个网站提供一个稳定、快速、免费的前端开源项目 CDN 加速服务，如果您的项目里面要引入bootstrap，使用CDN加速的方式无疑会大大提高您的线上应用的访问速度。
搜索上一节用到的FileSaver.js，并复制
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
您可以通过以下 API 获取 BootCDN 所加速的所有前端开源库的文件列表：
https://api.bootcdn.cn/names.json
您还可以通过以下 API 获取 BootCDN 所加速的所有前端开源库的基本信息：
https://api.bootcdn.cn/libraries.json
该列表是一个 json 数组（Array），数组中的每一个条目含义分别为：
- 开源库的名称（name）
- 描述（description）
- 星标数（stars）
通过下列的API获取某个特定的名称的开源库的详细信息：
https://api.bootcdn.cn/libraries/[name].json
通过此接口获取到的是开源库的 JSON 对象（Object）格式的详细信息，包括所有版本以及文件列表。[name] 是开源库的名称，可从[开源库简要信息列表]或[开源库名称列表]中获取。其中，assets 属性是所有版本及对应文件的列表。
5. 图片导出
还记得我们的目标吗？对，笔者这里只是为了画图，当然最终是想要得到一个png或者什么格式的图片了。既然是html5绘图，那么直接右键保存可以吗，试一下，看到如下的效果：
要么就是非常不清晰，如下所示：
怎么清晰地导出图片呢？
笔者推荐使用echarts自带的工具栏，毕竟原生的支持的最好，实现起来也很简单，就是在option配置中加入如下的内容：
toolbox: {
//工具栏是否显示
show : true,
feature : {
mark : {show: true},
//切换至数据视图，更改数据可以看到实时更新的图像
dataView : {show: true, readOnly: false},
//切换至折线图或柱状图
magicType : {show: true, type: ['line', 'bar']},
//重新载入原始数据
restore : {show: true},
//是否可以导出图片
saveAsImage : {show: true}
}
}
最终，保存到本地的效果如下所示：
