vue+echarts实现省份地图展示

一、效果

 下面以四川省地图为例,展示效果如下: 

二、echarts的安装

 这里我是使用npm进行安装的,命令如下:

npm install echarts

三、echarts各省份地图js导入

以下是我下载好的各省份的数据,可以直接下载使用,放在项目js文件夹下,在页面内引入。

百度网盘链接:https://pan.baidu.com/s/1BLMQeLWfhHyXEOoE9CiOLA

提取码:rcy5

四、完整代码 



如果要在地图上标点,则需要添加以下:

markPoint: {
	// 自定义标记点图标
     symbol: 'image://' + require('../assets/img/edit.png'),
    // 图标大小
     symbolSize: [20, 20], 
     label: {
         position: 'top',
		 // 数字颜色
         color: '#000000'
     },
     // 数组存放地址坐标,就是上面的标记点
     data: [
        { name: '成都市', coord: [102.72,25.05], value: '78' },
     ]
}

你可能感兴趣的:(vue,echarts,vue.js,前端)