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

一、ArcGIS API for 4.x结合Echarts4

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

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

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

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

二、版本

ArcGIS API for ：目前最新版本4.10
Echarts：4版本

三、使用介绍

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

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

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

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

3、初始化echarts对象

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

4、设置option

overlay.setOption(option);

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

 overlay.deleteECharts();

当然，当我们想对渲染数据的进行更新，可以结合第四步和第五步来实现数据的动态更新。
最后是demo示例的下载链接ArcGIS API4.X+Echarts4数据可视化示例，需要的小伙伴可以下载呦！！！