echarts tree默认展开_Echarts树图定制详解

本文讲的是如何定制Echarts的tree图。主要包括下载、全局变量名修改、左键菜单添加、右键菜单添加、内容缩放、文本过滤高亮等。

一 说明

Echarts中提供了tree图，但实际项目中，该tree图并不一定能完全满足项目需求。例如：需要在鼠标右键到节点上添加一个下拉菜单，并且能进行操作。因此，就需要要对该图表进行定制。

二 代码下载

实际项目开发中，可能只需要一个tree图，就没必要下载全量的Echarts代码包了，因为完整的Echarts代码包非常大，10多万行代码呢，为提高项目性能，建议只下载用到的图标和组件。

而Echarts也非常人性化的提供了在线定制构建能力，可以实现按需下载：http://www.echartsjs.com/builder.html

三 全局变量名修改

实际项目中可能已经引入了Echarts，但该Echarts版本存在问题：当前使用的Echarts版本太老了，该版本中还没有我们将要用到的Tree图，而要将整个版本升级到最新版本，或者有Tree图的版本，可能会导致之前图表出现接口不一致导致的BUG，尤其是已经上线或者即将上线的项目，这种升级风险很大。

一个比较好的解决方案就是：引入两套Echarts代码。

但必须解决两套Echarts图表代码冲突的问题，而这个冲突主要是Echarts对外提供的全局变量windows.echarts。只需要将一个Echarts代码包中的全局变量修改掉，然后使用修改后的全局变量生成图表即可。

在下载的Echarts包中(uglify混淆后的包)，搜echarts，将下边位置的echarts修改为dlgTr