Echarts绘制各省地图

Echarts 绘制全国地图

近期工作需要用到echarts制作省内地图，研究了一番，好多人写的很模糊不好理解，我这里写个菜鸟教程记录一下。

在页面引入 jquery.js h和echarts.js 关键是需要地图的json数据，有js的更好。这里提供china.json下载：

链接：https://pan.baidu.com/s/1LawcD8JQkHkd0OjpFG0jKQ 密码：phrt

全国以及各地市的数据这里下载 https://download.csdn.net/download/cc_wake/10569191

<%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>地图</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="china_map" style="width:800px;height:800px;">hello</div>
<script type="text/javascript">
$.get('js/henan.json',function(data){//这里是json转js，如果是js文件就不需要这一步
echarts.registerMap('henan',data);//设置地图
var myChart = echarts.init(document.getElementById('china_map'));//初始化
myChart.setOption({
title: {
text: '河南地图'
},
series: [{
type: 'map',//类型必须是map
map: 'henan'//注意这里的值需要和echarts.registerMap('henan',data);一致
}]
});
myChart.on('click', function(params){
alert(1);
console.log(params);//此处写点击事件内容
});//点击事件，此事件还可以用到柱状图等其他地图
});
</script>
</body>
</html>

刚开始一脸蒙蔽，弄了好久才明白，你要是理解不了也没关系，把我的代码直接拷走就行。改一下js引入地址。

该文章系转载，出自: https://blog.csdn.net/cc_wake/article/details/81257826

Echarts绘制各省地图相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
echarts全国各省地图数据资源
相信很多人都用echarts绘制过地图,但是苦于寻找省市的数据包,echarts本身提供的数据包又涉及版权问题不再提供使用,下面提供一份干货: 某大厂提供的地图数据包链接,很全,省.市.区都有 htt ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
如何通过echarts绘制北京市地图并可以添加标记并可点击
首先获取城市地图所对应的json文件通过这个网站可以获取到城市地图所对应的json echarts 中使用的是地图的js文件需要找到北京地图的js文件下载各个城市的js文件绘制出地图在地图上 ...
不习惯的 Vue3 起步六の Echarts绘制下钻地图
序看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...
echarts绘制3D地图
使用echarts和echarts-gl绘制3D地图,下面是一个demo演示,echarts版本4.6.0,echarts-gl版本1.1.2,demo启动前先自行安装,至于背景嘛,大家就自行放个背景 ...

Echarts绘制各省地图

Echarts绘制各省地图相关推荐

最新文章

热门文章