echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份 且地图显示省份名称

echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份 且地图显示省份名称

先上效果图

在这里插入图片描述
在这里插入图片描述

先讲下需求:
1.地图上显示各个省份的名称
2.对不同省份进行区分(项目涉及到省份排名之类的);
3. 点击进入不同省份 展示各个省份的市区信息;
4. 在省份地图上添加marker ;

讲下实现思路

1.中国地图使用geo3d 和scatter3D做文字图层,用map3d实现点击可以获取省份信息,如果单独使用geo3d,无法获取到点击的省份信息。还有一些思路写在代码中了。

上代码

 var dom: any = document.getElementById("container")

 myChart = echarts.init(dom);
 let geoCoordMap: any = [
  {
    "name": "北京市", "value": [116.405285, 39.904989, 0] },
  {
    "name": "天津市", "value": [117.190182, 39.125596, 0] },
  {
    "name": "河北省", "value": [114.502461, 38.045474, 0] },
  {
    "name": "山西省", "value": [112.549248, 37.857014, 0] },
  {
    "name": "内蒙古自治区", "value": [111.670801, 40.818311, 0] },
  {
    "name": "辽宁省", "value": [123.429096, 41.796767, 0] },
  {
    "name": "吉林省", "value": [125.3245, 43.886841, 0] },
  {
    "name": "黑龙江省", "value": [126.642464, 45.756967, 0] },
  {
    "name": "上海市", "value": [121.472644, 31.231706, 0] },
  {
    "name": "江苏省", "value": [118.767413, 32.041544, 0] },
  {
    "name": "浙江省", "value": [120.153576, 30.287459, 0] },
  {
    "name": "安徽省", "value": [117.283042, 31.86119, 0] },
  {
    "name": "福建省", "value": [119.306239, 26.075302, 0] },
  {
    "name": "江西省", "value": [115.892151, 28.676493, 0] },
  {
    "name": "山东省", "value": [117.000923, 36.675807, 0] },
  {
    "name": "河南省", "value": [113.665412, 34.757975, 0] },
  {
    "name": "湖北省", "value": [114.298572, 30.584355, 0] },
  {
    
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在echarts geo3D地图中实现鼠标悬浮显示提示框和提示内容,可以按照以下步骤操作: 1. 首先在echarts图表配置中定义tooltip组件: ``` tooltip: { trigger: 'item', formatter: '{b}' } ``` 其中,`trigger`属性表示触发类型,这里设置为`item`表示鼠标悬浮在图形上时触发;`formatter`属性表示提示框内容格式化器,这里设置为`{b}`表示显示数据项的名称。 2. 在geo3D地图中定义数据项的名称: ``` series: [{ type: 'map3D', map: 'world', nameMap: { 'China': '中国', 'United States': '美国', 'Russia': '俄罗斯', // ... }, // ... }] ``` 其中,`nameMap`属性表示数据项的名称映射,用于将英文名称转换为中文名称。 3. 设置覆盖物的样式和提示框内容: ``` series: [{ type: 'map3D', map: 'world', nameMap: { 'China': '中国', 'United States': '美国', 'Russia': '俄罗斯', // ... }, itemStyle: { color: '#fff', opacity: 0.8 }, emphasis: { label: { show: true, textStyle: { color: '#000' } }, itemStyle: { color: '#f00', opacity: 1 } }, tooltip: { trigger: 'item', formatter: '{b}' }, // ... }] ``` 其中,`itemStyle`属性表示覆盖物的样式,这里设置为白色半透明;`emphasis`属性表示覆盖物的高亮样式,这里设置为红色不透明;`tooltip`属性表示提示框组件,这里与图表配置中的相同。 4. 最后,通过`geo3D`组件的`label`属性设置覆盖物的名称显示: ``` geo3D: { ... label: { show: true, textStyle: { color: '#000' } }, ... } ``` 其中,`show`属性表示是否显示标签名称,这里设置为`true`;`textStyle`属性表示标签名称的样式,这里设置为黑色。 以上就是在echarts geo3D地图中实现鼠标悬浮显示提示框和提示内容的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值