最近看到同事在弄下面的这个图，这个图是从网上看到的，是某个网站的收费项目：

收费模板：￥29.9元购买，且必须是高级版+尊享版才能够购买这个。。。

死贵！！！

所以，最后的决定是通过echarts中的3D地图来写。但是写出来的效果不慎好看。功能是可以实现的。

初版效果图如下：

1.安装echarts和echarts-gl

npm install echarts --save
npm install echarts-gl --save

2.局部引入使用

直接上代码：

import * as echarts from 'echarts';
import 'echarts-gl';

3. 下载中国地图数据，存储到本地路径下

我这边是存储到当前文件夹中了。。。
稍后我会把china.js文件上传到资源中心，有需要的可以自行下载。

4. html模板内容

5.script内容

背景颜色是echarts外层的div的background来控制的，改成白色，更显眼一点。

基本布局完成！！！

6.geo3D地图禁止缩放+旋转

options = {geo3D: {map: 'china',roam: true,silent: true, //禁止鼠标移入某个区域后高亮显示itemStyle: {color: '#333',opacity: 1,borderWidth: 0.4,borderColor: '#fff',},viewControl: {beta: 0, //x轴旋转alpha: 60, //Y轴旋转panMouseButton: 'center', //平移操作使用的鼠标按键rotateMouseButton: 'left', //旋转操作使用的鼠标按键rotateSensitivity: 0, //禁止旋转地图//下面的四个参数 可以实现禁止缩放地图projection: 'orthographic',orthographicSize: 110,maxOrthographicSize: 110,minOrthographicSize: 110,},},}

修改的参数是options中的geo3D中的viewControl参数。

6.1 禁止旋转地图

rotateSensitivity: 0, //禁止旋转地图

6.2 禁止缩放地图

//下面的四个参数 可以实现禁止缩放地图
projection: 'orthographic',
orthographicSize: 110,
maxOrthographicSize: 110,
minOrthographicSize: 110,

6.3 设置透明背景的地图

options = {geo3D: {map: 'china',roam: true,silent: true, //禁止鼠标移入某个区域后高亮显示itemStyle: {color: 'transparent',opacity: 1,borderWidth: 0.4,borderColor: '#fff',},}
}

1. 可以设置itemStyle中的color：为transparent，来设置背景透明
2. opacity：设置为0，也可以实现背景透明化
3. borderWidth：设置边框宽度
4. borderColor：设置边框颜色

6.4 鼠标移入时，禁止高亮展示当前区域——silent: true

options = {geo3D: {map: 'china',roam: true,silent: true, //禁止鼠标移入某个区域后高亮显示}
}

6.5 设置bar3D柱子的颜色

设置柱子颜色，需要把visualMap中的内容注释掉，然后在series中的bar3D中设置color才生效！！！

多多积累，多多收货！！！

附录参考链接：
echarts实现3D地图：http://www.javashuo.com/article/p-fcfpjabz-gh.html