直播系统代码，自定义附近的人功能地图颜色

首先我们要初始化echarts

1	`<br>let echartsMap = this.$echarts.init(this.$refs.echartsMap);`

注册地图

<br>this.$echarts.registerMap('河南', dataGeoLocation);<br>//后面的dataGeoLocation是我们下载下载的地图json文件然后引入到当前<br>//组件中进行使用的，前面的河南则是我们要注册的地图

设置option对象

这里面的配置是根据自己的项目需求而来的自己可以看文档都有详细的介绍

<br> this.echartsDataMap = {<br>              visualMap: {<br>                min: 0,<br>                max: 500,<br>                show: false,<br>                inRange: {<br>                  color: ['#eac736', '#6EAFE3'].reverse()<br>                },<br>              },<br>              globeRadius: 100,<br>              globeOuterRadius: 100,<br>              geo3D: {<br>                map: mapName,<br>                viewControl: {<br>                  center: [0, 0, 0],<br>                  alpha: 100,//上下旋转角度<br>                  beta: 10,//左右旋转角度<br>                  animation: true,//是否动画显示<br>                  animationDurationUpdate: 1000,//动画时间<br>                  distance: 130,//视角到主题距离<br>                  minBeta: -9999,//最小（左）旋转度数<br>                  maxBeta: 9999,//最多（右）旋转角度<br>                  autoRotate: false,<br>                  autoRotateDirection: 'cw',<br>                  autoRotateSpeed: 10,<br>                },<br>                splitArea:{<br>                  areaStyle:{<br>                    color:'red',<br>                  }<br>                },<br>                light: {<br>                  main: {<br>                    intensity: 1.2,<br>                    // color: 'transparent',<br>                    color: '#0D3867',<br>                    shadowQuality: 'ultra',<br>                    shadow: true,<br>                    alpha: 150,<br>                    beta: 200<br>                  },<br>                  ambient: {<br>                    intensity: 1,//环境光强度<br>                  },<br>                  ambientCubemap: {<br>                    diffuseIntensity: 1,<br>                    texture: ''<br>                  }<br>                },<br>                groundPlane: {<br>                  show: false<br>                },<br>                postEffect: {<br>                  enable: false<br>                },<br>                itemStyle: {<br>                  color: '#175096',<br>                  borderColor: 'rgb(62,215,213)',<br>                  opacity: 0.8,//透明度<br>                  borderWidth: 1<br>                },<br>                label: {<br>                  show: false<br>                },<br>                emphasis: {<br>                  label: {<br>                    show: false<br>                  },<br>                  itemStyle: {<br>                  }<br>                },<br>                silent: false, // 不响应和触发鼠标事件<br>              },<br>              series: [<br>                {<br>                  type: 'scatter3D',<br>                  coordinateSystem: 'geo3D',<br>                  data: this.areaName<br>                  symbol: 'circle',<br>                  symbolSize: 0,<br>                  silent: false, // 不响应和触发鼠标事件<br>                  itemStyle: {<br>                    borderColor: '#fff',<br>                    borderWidth: 1<br>                  },<br>                  label: {<br>                    distance: 30,<br>                    show: true,<br>                    formatter: '{b}',<br>                    position: 'bottom',<br>                    bottom: '100',<br>                    textStyle: {<br>                      color: '#fff',<br>                      marginTop: 40,<br>                      fontSize: 16,<br>                      // fontWeight:'bold',<br>                      backgroundColor: 'transparent',<br>                    }<br>                  }<br>                },<br>                {<br>                  type: 'scatter3D',<br>                  coordinateSystem: 'geo3D',<br>                  data: pinArr,<br>                  color: '#6EAFE3',<br>                  symbol: 'pin',<br>                  symbolSize: 56,<br>                  symbolOffset: ['100%','50%','0'],<br>                  silent: false, // 不响应和触发鼠标事件<br>                  itemStyle: {<br>                    textAlign: 'center',<br>                    borderColor: '#6EAFE3',<br>                    backgroundColor: '#6EAFE3',<br>                    borderWidth: 0<br>                  },<br>                  zlevel: -10,<br>                  label: {<br>                    show: true,<br>                    distance: -45,<br>                    // left:-10,<br>                    position: 'bottom',<br>                    formatter: (data) => {<br>                      return data.value[3] + '     ';<br>                    },<br>                    textStyle: {<br>                      color: '#333',<br>                      backgroundColor: 'transparent'<br>                    }<br>                  }<br>                },<br>              ]<br>            };

将option实例到我们的echarts上