echarts 内置地图使用

项目基于 "@angular/cli": "~9.0.2" && "echarts": "^4.7.0" 。

使用的 官方示列 ,示列数据拷贝到本地,显示:

地图区域空白,查阅资料, 是因为地图文件未导入。

加上

import 'echarts/map/js/world.js';

这一行,显示:

 地图显示出来了。

另一种加载地图数据的方式,首先将 node_modules/echarts/map/json 下的 文件 world.json 拷贝到项目 assets 目录下,然后异步加载后手动注册:

this.http.get('assets/map/world.json').subscribe((worldJson) => {
    // 手动注册地图数据
    echarts.reg
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts是一个非常流行的开源JavaScript图表库,它提供了丰富的图表类型和交互功能,适用于数据可视化。如果你想在ECharts中展示印尼地图ECharts提供了地图组件,可以通过其内地图数据集轻松实现。 为了在ECharts中绘制印尼地图,你可以按照以下步骤操作: 1. 首先,确保你已经在项目中引入了ECharts库,可以通过CDN或者npm安装。 2. 加载地图数据:ECharts默认包含了世界地图的数据,包括印尼地图。你可以使用`echarts.init()`后调用`echarts.getMap()`方法来获取印尼地图的地理编码信息。 3. 创建地图实例:创建一个新的ECharts实例,并设地图项,如地图类型、颜色填充、标签等。 4. 绑定地图数据:将地图的系列设为`type: 'map'`,然后指定`data`属性为印尼的地理编码ID。 5. 设其他选项,比如标题、图例、鼠标交互等。 6. 渲染地图:调用`setOption()`方法并传入配,最后执行`resize()`以适应容器大小。 示例代码(简化版): ```javascript // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 加载地图数据 var mapData = echarts.getMap('indonesia'); // 地图 var option = { title: { text: 'Indonesia Map' }, tooltip: {}, series: [{ type: 'map', map: 'indonesia', // 使用印尼地图 data: mapData.map, // 填充地图数据 roam: true, // 允许缩放和平移 label: { show: true, position: 'right' } }] }; // 渲染地图 myChart.setOption(option); myChart.resize(); ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值