=1.打开 [阿里云](datav.aliyun.com/portal/scho…)
2.复制右侧第一个链接JSON API 此时格式很乱,不利于看
3.粘贴链接到网页 打开json格式
为了方便查看,可以下载谷歌拓展程序
如何下载谷歌拓展程序JSON-handle
① 下载地址
②打开谷歌浏览器--展开右侧三个点---更多工具---拓展程序---打开右侧开发者模式
③将下载好的JSON-handle 拖到网页即可(或者点击左侧 加载已解压的拓展程序)
④此时再打开((geo.datav.aliyun.com/areas_v3/bo…)
格式就发生了变化
不下也不影响开发,可以把网页上的代码Ctrl+A全选--然后复制下来.
4.打开项目的assets文件夹----新建mapData.js (文件名可以自己取)存放中国地图数据 export const mapData = 把刚才的数据粘贴进来 5.在需要使用的组件中引入 import { mapData } from '../../assets/mapData' methods: { const option = { color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'], title: { text: '{a|美女图片}', // 定义图片 textStyle: { color: 'red', rich: { a: { width: 50, height: 50, backgroundColor: { image: 'gimg2.baidu.com/image_searc…' } } } } }, /* 地理坐标组件 */ 6. 在option的geo属性设置对应值 geo: { type: 'map', map: 'chinaMap', roam: true, //平移 zoom:5, // 地图缩放比例 // 设置地图中心点 center: [117.293742,31.856051]
}
}
}
7.使用 在初始化echarts实例前，调用echarts.registerMap方法
mounted () {
/* 注册当前使用的地图名 */
echarts.registerMap('chinaMap', mapData)
}
echarts引入china报错（The GeoJSON of the map must be provided）
原因： echarts版本过高，ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。
经过一番摸索，实践出两种方法。 末尾附china.json文件，没有乱码噢。
解决方法1：使用echarts.registerMap方法
解决方法2： 下载低版本的echarts@4.1
npm ls echarts // 查看自己的echarts版本 npm install echarts@4.1.0 --save //下载低版本echats包含mapData.js 然后在组件内直接引入mapData.js即可
import { mapData } from '../../assets/mapData'
