echarts 3D地图为区域自定义颜色的解决方法
更新时间：2023年05月09日 10:24:05 作者：Geometric coolness
在Echarts中,我们很多时候是需要给自己想要的几个区域的地图进行颜色高亮,这篇文章主要给大家介绍了关于echarts 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中就可以了
总结
到此这篇关于echarts 3D地图为区域自定义颜色的文章就介绍到这了,更多相关echarts 3D地图自定义颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
多语言的重要性相信不需要多言,下面这篇文章主要给大家介绍了关于前端不使用i18n该如何优雅的实现多语言,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要给大家介绍了关于微信小程序中获取用户手机号授权登录的详细步骤,在微信小程序中开发者可以通过微信提供的API接口实现用户登录和获取用户的手机号,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了JS使用H5实现图片预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
这篇文章主要介绍了浅谈Vue3.0之前你必须知道的TypeScript实战技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了JS实现多选框的操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
replace方法的语法是stringObj.replace(rgExp, replaceText),其中stringObj是字符串(string),下面这篇文章主要给大家介绍了关于JavaScript中replace()函数的相关资料,需要的朋友可以参考下2023-01-01
ES6为我们在函数的使用上也提供了许多的便捷的东西,下面这篇文章主要给大家介绍了关于ES6学习笔记之let、箭头函数和剩余参数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
Kibo是一个简单的用于处理键盘事件的Javascript工具库。2011-10-10
这篇文章主要为大家详细介绍了微信小程序实现日历小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，本文重点给大家介绍JavaScript手动实现instanceof的问题，感兴趣的朋友跟随小编一起看看吧2021-10-10
最新评论