项目场景：
使用第三方插件建立一个无限级目录的折线树图。
一、ECharts是什么？
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、为什么使用ECharts？
ECharts的优点：
（1）丰富的可视化类型
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
（2）多种数据格式无需转换直接使用
ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。
（3）千万数据的前端展现
通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。
以上是 ECharts优点的一部分，若想具体了解，可到官方手册的特性介绍查看，网址：特性 - Apache ECharts
二、使用步骤
1.获取 Apache ECharts
从 npm 获取：
npm install echarts --save
从 GitHub 获取：
apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后
dist目录下的echarts.js即为包含完整 ECharts 功能的文件。
2.引入 ECharts 文件
代码如下（示例）：
<script src="./plugins/echarts/dist/echarts.min.js"></script>3.设置一个容器
代码如下（示例）：
<style>
#frame{
width: 79.8%;
height: 750px;
border: 1px solid #E1E1E1;
float: left;
border-left: 0;
/*体系图的背景图修改为相应路径*/
background-image: url("./plugins/echarts/img/1.png");
background-repeat: no-repeat;
background-size:100% 100%;
}
#container{
float: left;
border-left: 0;
overflow:auto;
width: 100%;
height: 700px ;
}
</style>
<div id="frame">
<!--layui框架的固定块-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend style="margin-left: -44%">文件体系图</legend>
</fieldset>
<!--ECharts的容器-->
<div id="container"></div>
</div>4.核心配置
代码如下（示例）：
<script type="text/javascript">
//官方数据请求路径
const ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
//获取存储div
const chartDom = document.getElementById('container');
const myChart = echarts.init(chartDom);
let option;
//显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id'));
myChart.showLoading();
//官方数据请求路径
//$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
$.getJSON("{url:/document_revision/echarts_ajax}",{status:1}, function (data) {
//得到数据后隐藏Loading标志
myChart.hideLoading();
echarts.util.each(data.children, function (datum, index) {
//间隔展开子数据，animate，display，physics，scale，vis是展开的
index % 1 ===1 && (datum.collapsed = true);
//只展开第一层
//datum.collapsed = true;
});
myChart.setOption(
option = {
//提示框组件
tooltip: {
//触发类型，默认：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）。可选：'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
trigger: 'item',
//提示框触发的条件，默认mousemove|click（鼠标点击和移动时触发）。可选mousemove：鼠标移动时，click：鼠标点击时，none：
triggerOn: 'mousemove'
},
//系列列表
series: [{
//树形结构
type: 'tree',
//开启鼠标缩放和平移漫游
roam:true,
//id: 0,
//上面从flare.json中得到的数据
data: [data],
//距离上
top: '1%',
//左
left: '7%',
//下
bottom: '1%',
//右的距离
right: '20%',
//直线树状图(存在缺陷,官网示例也是如此)
//控制是否为折线
edgeShape: 'polyline',
//径向树状图
//layout: 'radial',
symbol: 'emptyCircle',
//从上到下
//orient: 'vertical',
edgeForkPosition: '90%',
itemStyle:{
//颜色
//color:'red',
//圆点的线条类型 solid 实线 dashed 虚线 dotted 虚线(频度偏小)
borderType:'solid',
},
lineStyle: {
//线条粗细
width: 2
},
//标记的大小，就是那个小圆圈，默认7
symbolSize: 11,
//每个节点所对应的标签的样式
label: {
shadowColor:'transparent',
borderType:'dashed',
normal: {
//标签的位置
position: 'left',
//文字垂直对齐方式，默认自动。可选：top，middle，bottom
verticalAlign: 'middle',
//文字水平对齐方式，默认自动。可选：top，center，bottom
align: 'right',
//标签文字大小
fontSize: 13
}
},
//叶子节点的特殊配置，如上面的树图示例中，叶子节点和非叶子节点的标签位置不同
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
//子树折叠和展开的交互，默认打开
expandAndCollapse: true,
//树图初始展开的层级（深度）
initialTreeDepth : 2,
//初始动画的时长，支持回调函数,默认1000
animationDuration: 1550,
//数据更新动画的时长，默认300
animationDurationUpdate: 750
}]
}
);
});
//渲染数据
option && myChart.setOption(option);
</script>效果图
意外问题描述：
在使用折线树图时，发现收缩展开几次后，会出现乱版现象，到官网查看示例，亦是如此，如下图：
解决方案：乱版是最新的几个版本才出现的（官网案例出错版本号：5.2.1,5.2.0两个版本），在以前的版本并没有乱版问题，下载的除这两个之外的版本即可。
