# echarts_map_project
**Repository Path**: andyxiaopeng/echarts_map_project
## Basic Information
- **Project Name**: echarts_map_project
- **Description**: 快速上手echarts的map部分，傻瓜式教程
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-03-30
- **Last Updated**: 2022-05-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 傻瓜式Echarts教程
***--map篇20分钟基础入门***
## 一、环境、资源准备
> 1、Echarts的引入：
>
> ```html
>
>
>
>
>
>
>
>
> ```
>
> 2、Echarts所需要地图数据的标准：[GeoJSON标准格式链接](https://geojson.org/)
>
> 
>
> 3、实例模板：
>
> 1. [150行代码实现城市3D构建](https://www.makeapie.com/editor.html?c=xrJHCfsfE-)
> 2. [全国主要城市空气质量](https://echarts.apache.org/examples/zh/editor.html?c=map-polygon)
> 3. [跨境电商百度指数](https://www.makeapie.com/editor.html?c=x9dsJQiYl)
> 4. [传感器布设平面图](https://www.makeapie.com/editor.html?c=x2Z4NzPSRh)
>
> 4、快速了解：[速查手册](https://echarts.apache.org/zh/cheat-sheet.html)
## Echarts的geo组件
- geo在Echarts中是一个坐标系
- 支持鼠标等操作事件
- 接收GeoJSON标准格式的数据
- 允许多个地图类型相同的系列在同一地图（同一geo地理坐标系）中显示
- [geo组件详细接口](https://echarts.apache.org/zh/option.html#geo)
## 具体实现：
1. 创建html模板文件，引入Echarts，并添加一个id为“main”的div
```html
Document
```
2. 根据id号，通过 [echarts.init](https://echarts.apache.org/zh/api.html#echarts.init) 方法初始化一个 echarts 实例
```html
Document
myEcharts
```
3. 使用echarts实例的[setOption](https://echarts.apache.org/zh/api.html#echartsInstance.setOption) 方法生成一个简单的柱状图
```html
Document
myEcharts
```
4. 效果显示（测试能否使用Echarts）
5、再次准备一个echarts初始项目，并导入jquery包
```html
Document
```
6、获取echarts的实例化对象
```html
Document
```
7、选择获取GeoJSON数据的方式：（第二部分将会详细讲述GeoJSO）
官方提供了两种方式，我们这里使用第一种（异步JSON 获取数据）
（注意：第二种 异步获取数据的方法更常用）
```html
# 官方示例
```
例如我的代码：
```html
Document
```
8、在echarts中，注册自己的GeoJSON地图数据
```javascript
echarts.registerMap('自定义名称',geojson数据的变量名);
```
例如我的代码：
```html
ZUCCmap
```
9、自定义整体图表的渲染效果
- 标题
- 工具（[导出图片](https://echarts.apache.org/zh/option.html#toolbox.feature.saveAsImage)，[数据视图](https://echarts.apache.org/zh/option.html#toolbox.feature.dataView)，[动态类型切换](https://echarts.apache.org/zh/option.html#toolbox.feature.magicType)，[数据区域缩放](https://echarts.apache.org/zh/option.html#toolbox.feature.dataZoom)，[重置](https://echarts.apache.org/zh/option.html#toolbox.feature.reset)）
- 图例
- ..........
可以如下配置：
```javascript
var option = {
tooltip: { // 图中每个小item的格式话显示效果
trigger: 'item',
formatter: '区域名称：
{b}'
},
visualMap: { // 视觉映射
min: 500,
max: 38000,
text: ['High', 'Low'],
left: 'right',
realtime: false,
calculable: true,
inRange: {
color: ['#b4b4b4', '#19b401', '#03eaff', '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
series: [
{
name: 'zuccmap',
type: 'map',
mapType: 'zuccgeo', // 自己注册或者内置的地图
aspectScale: 1, // 地图长度比
roam: true, // 是否允许缩放
zoom: 2, // 初始缩放
scaleLimit: {
min: 0.5,
max: 10,
},
label: {
normal: { // 普通状态
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: { // 鼠标悬浮的状态
show: true,
textStyle: {
color: '#333'
}
}
},
data: zuccdata // 地图中每个item的数值
},
]
};
```
整体代码：
```html
ZUCCmap
```
10、把自定义完成后的option选项装配到一开始实例化的echarts对象中
```javascript
myChart.setOption(option);
```
整体代码：
```html
ZUCCmap
```
11、效果展示
## 二、map地图绘制（构建GeoJSON数据）
> 1、在线绘画工具：[geojson](http://geojson.io/)
>
> 
>
> 2、根据官方文档中geo的[nameProperty](https://echarts.apache.org/zh/option.html#geo.nameProperty)选项所描述
>
> 其默认：*数据点中的 name：Alabama 会关联到 GeoJSON 中 NAME 属性值为 Alabama 的地理要素*
>
> 3、分析在线工具所生成代码
>
> ```json
> {
> "type": "FeatureCollection",
> "features": [
> {
> "type": "Feature",
> "properties": {},
> "geometry": {
> "type": "Polygon",
> "coordinates": [
> [
> [
> -103.88671875,
> 42.74701217318067
> ],
> [
> -96.50390625,
> 42.74701217318067
> ],
> [
> -96.50390625,
> 45.767522962149876
> ],
> [
> -103.88671875,
> 45.767522962149876
> ],
> [
> -103.88671875,
> 42.74701217318067
> ]
> ]
> ]
> }
> }
> ]
> }
> ```
>
> 发现其 ’properties‘ 选项与[nameProperty](https://echarts.apache.org/zh/option.html#geo.nameProperty)文档描述一致，可以在 ’properties‘ 选项中加入 ’name‘ 属性值
>
> 例如：
>
> ```json
> {
> "type": "FeatureCollection",
> "features": [
> {
> "type": "Feature",
> "properties": {
> "name": "iterm的name"
> },
> "geometry": {
> "type": "Polygon",
> "coordinates": [
> [
> [
> -103.88671875,
> 42.74701217318067
> ],
> [
> -96.50390625,
> 42.74701217318067
> ],
> [
> -96.50390625,
> 45.767522962149876
> ],
> [
> -103.88671875,
> 45.767522962149876
> ],
> [
> -103.88671875,
> 42.74701217318067
> ]
> ]
> ]
> }
> }
> ]
> }
> ```
## 三、Echarts的geo相关插件
> 是不是所有地图都需要自己手动绘制呢？
>
> 答案：否
>
> Echarts也提供了强大的地图插件：[Echarts拓展插件下载](https://echarts.apache.org/zh/download-extension.html)
>
> 以 “百度地图“ 插件为例：[bmap](https://github.com/apache/echarts/tree/master/extension-src/bmap)
1. 引入
```html
```
2. 使用
扩展主要提供了跟 geo 一样的坐标系和底图的绘制，因此配置方式非常简单，如下
```javascript
option = {
// 加载 bmap 组件
bmap: {
// 百度地图中心经纬度
center: [120.13066322374, 30.240018034923],
// 百度地图缩放
zoom: 14,
// 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
roam: true,
// 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
mapStyle: {}
},
series: [{
type: 'scatter',
// 使用百度地图坐标系
coordinateSystem: 'bmap',
// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
data: [ [120, 30, 1] ]
}]
}
// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
```