利用geoJson文件生成geo地理组件，如下图所示：

        三个颜色区域分别代表了3个区域图层；淡蓝色代表了线条；正中心是geo地理组件；右下角展示图例，是VisualMap视觉映射组件。

共包含以下功能：

（1）如何加载geo组件；

（2）如何使用visualMap组件；

（3）如何生成GeoJson文件，比如：一个多边形，多个多边形，一条线，多条线等的格式；

（4）如何生成带科技角的四角边框；

（5）如何在指定位置弹出tooltip悬浮框；

（6）如何在地图上展示散点且带闪烁效果(涟漪特效动画即气泡图)。

（7）如何根据用户需求设置geo特定区域的样式。

（8）如何展示高亮状态下图层。

下面我将根据以上功能详细介绍这两个组件的运用：

首先引入registerMap来注册地图，再引入json文件:

import { registerMap } from 'echarts';
import myjsonData from './myGeoMap.json';

registerMap(mapName,opt:{})方法传参：

        mapName为map对应的值，即地图名称，geojson的名称。

        opt:geoJson格式的数据。

再到初始化方法中调用：

registerMap('myGeoMap', myjsonData);

一、geo组件：

echarts的option对象加入geo,具体属性如下：

1. show :geo显示的开关；true为显示；

2. map: 设置为'myGeoMap'，即使用registerMap注册的地图名称；

3. roam：geo鼠标缩放和平移漫游功能；true为开启，默认为false

4. layoutCenter：geo地图中心在屏幕中的位置；

5. layoutSize：geo的大小。

6. selectedMode：是否选中单个或多个图层，默认false

7. regions:对geoJson中的特定区域进行配置样式，很重要的属性

8. emphasis：高亮状态下的样式,运用了itemStyle下各个属性

（1）areaColor:地图区域的颜色

（2）borderColor、borderWidth：边框颜色、线宽

（3）shadowBlur、shadowColor:图形阴影的模糊大小及阴影颜色。

9. tooltip：提示框组件

（1）show: 是否显示，默认为true

（2）borderColor:悬浮框的边框颜色

（3）borderWidth:悬浮框的边框线宽

（4）backgroundColor:悬浮框的背景色

（5）extraCssText:悬浮框的文本样式

（6）position回调函数：将悬浮框固定在什么位置

（7）formatter回调函数：如何呈现内容

二、visualMap组件：

我这里用的是type为piecewise分段型的图例组件。

1. itemWidth、itemHeight：图例中图形的宽、高；

2. align：visualMap中图形和文字的摆放，left:图在左，文字在右；

3. showLabel：图例中每项的文本标签；

4. inverse：是否反转，为true时和pieces数组顺序一致；

5. selectedMode：选中图例中的某项，高亮展示geo中被选中的相关图层，有可能是多个，所以默认为multiple,false：禁止选中，即关闭选中功能；

6. top、bottom：离geo容器的上下侧的距离；

7. left、right：离geo容器的左右侧的距离；

8. borderColor：图例边框的颜色；

9.  borderWidth：图例边框的线宽；

10. backgroundColor：图例的背景色；

11. textStyle：用到了里面的fontSize，用来设置文字的大小；

12. seriesIndex：图例用于哪个系列，我这里设为1，表示图例只用于geo组件，不用于series组件，否则series无效果。

13. pieces：自定义每段的范围及文字和样式

（1）value: 定义阶段值，根据阶段自定义；

（2）label:图例左侧要展示的文字；

（3）color: 每项的颜色值。

和区域对应就行。

具体功能都包含在代码中，详细代码下载链接：

https://download.csdn.net/download/qiulei_21/89952883