echars 3D地图为区域自定义颜色
问题
根据项目需求，我们要将下面省级地图中的个别市进行高亮（不同颜色）展示
延伸
首先跟大家介绍这个地图的展示方式：
- 采用的是Vue框架中运用echarts
- 地图采用的是geo3D和scatter3D
当然他的实现很简单
- 首先我们要初始化echarts
let echartsMap = this.$echarts.init(this.$refs.echartsMap);
- 注册地图
this.$echarts.registerMap('河南', dataGeoLocation); //后面的dataGeoLocation是我们下载下载的地图json文件然后引入到当前 //组件中进行使用的，前面的河南则是我们要注册的地图
- 设置option对象
这里面的配置是根据自己的项目需求而来的 自己可以看文档都有详细的介绍
this.echartsDataMap = { visualMap: { min: 0, max: 500, show: false, inRange: { color: ['#eac736', '#6EAFE3'].reverse() }, }, globeRadius: 100, globeOuterRadius: 100, geo3D: { map: mapName, viewControl: { center: [0, 0, 0], alpha: 100,//上下旋转角度 beta: 10,//左右旋转角度 animation: true,//是否动画显示 animationDurationUpdate: 1000,//动画时间 distance: 130,//视角到主题距离 minBeta: -9999,//最小（左）旋转度数 maxBeta: 9999,//最多（右）旋转角度 autoRotate: false, autoRotateDirection: 'cw', autoRotateSpeed: 10, }, splitArea:{ areaStyle:{ color:'red', } }, light: { main: { intensity: 1.2, // color: 'transparent', color: '#0D3867', shadowQuality: 'ultra', shadow: true, alpha: 150, beta: 200 }, ambient: { intensity: 1,//环境光强度 }, ambientCubemap: { diffuseIntensity: 1, texture: '' } }, groundPlane: { show: false }, postEffect: { enable: false }, itemStyle: { color: '#175096', borderColor: 'rgb(62,215,213)', opacity: 0.8,//透明度 borderWidth: 1 }, label: { show: false }, emphasis: { label: { show: false }, itemStyle: { } }, silent: false, // 不响应和触发鼠标事件 }, series: [ { type: 'scatter3D', coordinateSystem: 'geo3D', data: this.areaName symbol: 'circle', symbolSize: 0, silent: false, // 不响应和触发鼠标事件 itemStyle: { borderColor: '#fff', borderWidth: 1 }, label: { distance: 30, show: true, formatter: '{b}', position: 'bottom', bottom: '100', textStyle: { color: '#fff', marginTop: 40, fontSize: 16, // fontWeight:'bold', backgroundColor: 'transparent', } } }, { type: 'scatter3D', coordinateSystem: 'geo3D', data: pinArr, color: '#6EAFE3', symbol: 'pin', symbolSize: 56, symbolOffset: ['100%','50%','0'], silent: false, // 不响应和触发鼠标事件 itemStyle: { textAlign: 'center', borderColor: '#6EAFE3', backgroundColor: '#6EAFE3', borderWidth: 0 }, zlevel: -10, label: { show: true, distance: -45, // left:-10, position: 'bottom', formatter: (data) => { return data.value[3] + ' '; }, textStyle: { color: '#333', backgroundColor: 'transparent' } } }, ] };
- 将option实例到我们的echarts上
echartsMap.setOption(this.echartsDataMap);
解决问题
回头我们来看文章开头的问题，在百度上找到了很多方式，经过尝试好像没有什么效果，其实能够解决我也是根据网上提供的办法进行改进后就实现了
这是我在众多方式中找到的比较靠谱的一种方式，这里他说的是再geo中去添加regions即可，其实是这样的 但是我添加后没有效果，原因就是我的是geo3D而他的是geo，但是问题不大，经过我在三的尝试最终发现原来他们两个中仅仅是写法不一样
regions: [ { name: '郑州市', / itemStyle: { color: 'green' } },{ name: '南阳市', itemStyle: { color: 'green' } },{ name: '商丘市', itemStyle: { color: 'green' } }]
我们只需要更正一下color的设置形式然后添加到我们的geo3D中就可以了
你学会了吗
