Echarts中地图导入不显示问题及解决

4,360 阅读1分钟

Echarts4.x版本 -- 地图引入配置

一.发现问题

昨天在使用地图的过程中,解决的是vue中版本Echarts2.x版本的的地图问题,今天在使用Echarts4.x版本时发现,复制option有两种版本,有的没有显示mapType这 一属性,不知道该怎么在页面实现地图显示,查看官方文档的解释如下

二.利用所对应的js文件获取地图(只针对于使用js的实例) -- 问题及解决

将复制的代码复制搭建好的html项目script标签中

标题全国主要城市,所以我们需要引入两个js文件,echarts.js 和 chain.js,同时修改series的mapType属性

进行类型修改,由于替换了原先的散点类型,地图成功显示但是散点的数据消失了,我们需要对数据进行进一步处理保留散点功能

通过添加geo(地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图线集,改变series中的coordinateSystem: 'geo',使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。实现同时显示散点图和地图的功能,详情解释请参考官方文档

三.map的js文件的获取

  • 在vue脚手架创建项目时,用npm i echarts --save下载项目,会下载自带的js和json文件

    node_modules => _echarts@4.8.0@echarts => map => js和json

  • 百度网盘链接,从vue项目中拷贝的 ,有需要可以点击链接

    链接:https://pan.baidu.com/s/1U0_IkYwNsiRMlvpfr7eyaA 
    提取码:rmff