vue-echarts实现一个最基本的世界地图

        初学,项目需要实现世界地图,网上找了挺多但是都不适合,主要还是世界地图的geoJson文件,免费的却被有些人来拿赚钱,可恨。

我用的是vue3,ts,echarts5,vue-echarts6

<v-chart style="width: 100%; height: 400px" :option="option" />

import * as echarts from 'echarts';
import world from '@/assets/word.json';
echarts.registerMap('world', JSON.stringify(world));
let option = {
  series: [
    {
      type: 'map',
      map: 'world',
    }
  ]
};

 简单的不能再简单了,想要什么花里胡哨的效果可以到网上学习别人写的。

我使用了vue-echarts,所以省去了很多注册echarts的步骤,如果你没有使用就正常注册,然后把echarts.registerMap和option配置写上去就好了

实现最最简单的中国地图也一样,换一个geoJson文件就好了,然后把里面4处'world'换成'china'

geoJson文件(世界,中国)

链接: https://pan.baidu.com/s/1gDayuQ4l_RJ9k6WK-Z5tGg 提取码: 7777 复制这段内容后打开百度网盘手机App,操作更方便哦

--------------------手动分割线2024-04-27------------------------

geo文件链接我不小心删了,需要的同学可以下载echarts4版本,里面提供了完整的geo文件,

不要下最新的喔,4以上版本好像不提供geo文件了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值