ArcGIS API for Javascript 4.x结合Echarts实现数据可视化

一、ArcGIS API for Javascript 4.x结合Echarts

使用过Echarts和ArcGIS API for Javascript的GISer都知道，目前关于二者3版本相结合的学习资料已经有很多，并且在Echarts官网的扩展下载中有相关的链接。

但是随着Echarts和ArcGIS API for Javascript版本的不断更新，目前关于4版本的相关学习资料较少，为此本篇博客主要跟大家分享一下基于4版本的数据渲染。

下面是使用4版本的demo截图：

1. demo1-散点图渲染
   
2. demo2-动态线渲染
   

二、版本

ArcGIS API for Javascript：目前最新版本4.10

三、使用介绍

1、文件引用
将ArcGISEcharts4.js文件加载到页面，注意，该文件要写在ArcGIS API的init.js之前。我这里的init.js引用了官方网站的链接，代码如下：

<script src="ArcGISEcharts4.js"></script>
<script src="https://js.arcgis.com/4.10/init.js"></script>

2、加载EchartsLayer模块
EchartsLayer模块为我们自己定义的模块，所以说需要用到dojoConfig来配置模块路径/src：

var dojoConfig = {
        parseOnLoad: true,
        packages: [{
            name: "src",
            location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
        }]
    };
require(["src/EchartsLayer4", "dojo/domReady!"], function (EchartsLayer) {
	......
});

3、初始化echarts对象

 var overlay = new EchartsLayer(mapView, echarts);
 var chartsContainer = overlay.getEchartsContainer();
 var myChart = overlay.initECharts(chartsContainer);

4、设置option

overlay.setOption(option);

5、清除渲染
这里重点强调一下数据清除的使用，之前在网上看到好多人在问怎么清除地图上渲染的数据，我这里提供了一个deleteECharts方法，可以实现数据的清除，代码如下：

 overlay.deleteECharts();

当然，当我们想对渲染数据的进行更新，可以结合第四步和第五步来实现数据的动态更新。