## 散点图-140万纽约出租车
### 示例功能
本示例对接百度ECharts，实现在三维场景中加载ECharts散点图，基于纽约140万出租车数据实现散点图的可视化。
> 百度 ECharts
ECharts完整、详细使用方法可参考：官方教程API，开发库下载可参考：官方下载
### 示例实现
本示例需要使用【include-cesium-local.js】开发库实现，通过关键接口`CesiumZondy.Overlayer.EchartsLayer()`来实现ECharts图层的加载。
> 开发库使用请参见**首页**-**概述**-**原生JS调用**内容
> 特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案。
### 实现步骤
**Step 1. 引用开发库**：
本示例引用local本地【include-cesium-local.js】开发库，需要设置`include`属性为`echarts`；
* Example:
```javascript
```
**Step 2. 创建三维地图容器加载三维球控件,并加载底图**：
创建三维视图容器，构造三维场景控件，构造并设置鼠标位置显示控件，并加载第三方互联网地图作为底图；
**Step 3. 数据准备**：
本示例从离线数据文件中获取纽约市140万出租车的数据点，然后按照格式要求进行处理；
* Example:
```javascript
var CHUNK_COUNT = 19;
function fetchData(idx) {
if (idx >= CHUNK_COUNT) {
return;
}
var dataURL = `./static/data/echarts/point/data_${idx}.bin`;
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var rawData = new Float32Array(this.response);
layer.chart
.appendData({
seriesIndex: 0,
data: rawData
});
fetchData(idx + 1);
};
xhr.send();
}
```
**Step 4. 配置参数项**：
创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。
* Example:
```javascript
function initEcharts() {
var option = {
title: {
top: '10px',
text: "140万纽约出租车",
subtext: "数据来自纽约出租车以及Uber",
left: 'center',
textStyle: {
color: '#fff'
},
subtextStyle: {
color: '#fff'
}
},
cesium: {
roam: true
},
series: [{
type: 'scatterGL',
progressive: 2000,
coordinateSystem: 'cesium',
symbolSize: 0.5,
blendMode: 'lighter',
large: true,
itemStyle: {
color: '#FF0000',
},
postEffect: {
enable: true
},
silent: true,
dimensions: ['lng', 'lat'],
data: new Float32Array()
}]
};
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
}
```
### 关键接口
#### 1.【ECharts图层类】`CesiumZondy.Overlayer.EchartsLayer(map, option)`
基于mapboxgl的Layer对象进行的拓展，通过该拓展可以提供echarts的可视化功能。
| 参数名 | 类型 | 描述 |
| ------- | ------ | ------------------------------------------------------------ |
| map | Object | 传入的Cesium的地图对象 |
| option | Object | echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。 |
##### 【method】`hide()`：隐藏图层
##### 【method】`remove()`：删除图层
##### 【method】`show()`：显示图层
##### 【method】`update(option)`：更新图层
ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
| 参数 | 类型 | 描述 |
| ------ | ---- | -------------- |
| option | * | echarts.option |