## 自定义-网格专题图
### 示例功能
本示例对接百度ECharts，实现在三维场景中加载自定义的网格专题图。
> 百度 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. 数据准备**：
准备网格数据，并按照格式要求进行处理；
* Example:
```javascript
function renderItemFunc(params, api) {
var context = params.context;
var lngIndex = api.value(0);
var latIndex = api.value(1);
var coordLeftTop = [+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6), +(lngExtent[0] + latIndex *
cellSizeCoord[1]).toFixed(6)];
var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);
return {
type: 'rect',
shape: {
x: pointLeftTop[0],
y: pointLeftTop[1],
width: pointRightBottom[0] - pointLeftTop[0],
height: pointRightBottom[1] - pointLeftTop[1]
},
style: api.style({
stroke: 'rgba(0,0,0,0.1)'
}),
styleEmphasis: api.styleEmphasis()
};
}
function getCoord(params, api, lngIndex, latIndex) {
var coords = params.context.coords || (params.context.coords = []);
var key = lngIndex + '-' + latIndex;
return coords[key] || (coords[key] = api.coord([+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6), +
(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
]));
}
```
**Step 4. 配置参数项**：
创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用`CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)`方法，将ECharts图层添加到三维场景中。
* Example:
```javascript
function initEcharts() {
var option = {
tooltip: {},
visualMap: {
type: 'piecewise',
inverse: true,
top: 10,
left: 10,
pieces: [{
value: 0,
color: COLORS[0]
}, {
value: 1,
color: COLORS[1]
}, {
value: 2,
color: COLORS[2]
}, {
value: 3,
color: COLORS[3]
}, {
value: 4,
color: COLORS[4]
}, {
value: 5,
color: COLORS[5]
}],
borderColor: '#ccc',
borderWidth: 1,
backgroundColor: '#eee',
dimension: 2,
inRange: {
color: COLORS,
opacity: 0.8
}
},
cesium: {
roam: true
},
geo: {
geoIndex: 0
},
series: [{
type: 'custom',
coordinateSystem: 'cesium',
data: griddata,
renderItem: renderItemFunc,
animation: false,
itemStyle: {
emphasis: {
color: 'yellow'
}
},
encode: {
tooltip: 2
}
}]
};
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 |