ArcGIS底图+eCharts 迁徙图图显示与隐藏

通过使用Echarts3Layer.js扩展，可以实现在ArcGIS底图上添加eCharts图表，可以简单得到比ArcGIS API for JS更好的效果。

一般的eCharts图表可以通过clear()方法或echarts.setOption(option,true);方法去掉，但是此处不行。因为此处新增加的实际是一个新的图层。我通过修改Echarts3Layer.js源码实现了图层的显示与隐藏。

效果如以下录屏所示：

如果你不想了解如何修改的：文末提供修改后Echart3Layer.js的下载链接以及使用方法。

修改步骤：

原来新增加的图层并没有ID属性，因此我们没法设置该图层的属性，我们通过尝试增加ID属性，来获得该图层的实例，并设置其CSS属性来实现其显示与隐藏。

1、打开Echarts3Layer文件

打开后发现代码是被工程化的，并不易读，但没关系，这并不影响。

2、找到以下代码

var n=this._echarts3Container=document.createElement("div");

直接搜索即可

3、在这句代码后面添加以下代码

n.id="echarts3-div",

设置新图层的id属性

源码修改完毕。

 4、在代码中设置图表的显示与隐藏

设置隐藏图表

$('#echarts3-div').css('opacity','0')

图表显示： 

$('#echarts3-div').css('opacity','1')

———————————————————————————————————————————————————

修改后ECharts3Layer.js下载链接及用法

下载链接：

CSDN下载： https://download.csdn.net/download/scaped/10911390

百度网盘下载：https://pan.baidu.com/s/158u-InbdnZUicpCq7ILZOQ   提取码：41k1

使用方法：

1、将下载后的eCharts3Layer.js文件替换你原来的eCharts3Layer.js文件

2、如果你引入了jQuery，在你的代码中通过以下代码设置图表隐藏：

$('#echarts3-div').css('opacity','0')

通过以下代码设置图表显示： 

$('#echarts3-div').css('opacity','1')