如何利用echarts制作地图

准备工具

首先在echart中找到今天的主角模板,创建一个js文件夹在下面创建index.js文件,复制echarts代码到index.js

echarts模板地址如何利用echarts制作地图_第1张图片

材料准备

  • 下载echarts.min.js包
  • 下载bmap.js包
  • 申请百度浏览器api
    下载方法参照csdn的兄弟分享的另外一个地图

新建一个html文件,创建一个盒子并css修饰,导入包和index.js文件以及api

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图可视化</title>
		<script src=js/echarts.min.js></script>
		<script type="text/javascript" src="./js/bmap.js"></script>
		<script src="http://api.map.baidu.com/api?v=2.0&ak={百度的ak-记得去除括号}"></script>
		<style type="text/css">
			.myChart{
				width: 1000px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<div class="myChart"></div>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

index.js文件,echarts库设置mycharts和和setoption启动
index.js

		var mychart=echarts.init(document.querySelector(".myChart"))
		charts复制的部分粘贴到这儿
		mychart.setOption(option)
到了这一步就可以进浏览器看一下是否成功,然后就是修改数据

我这儿的需求是做全国职业数量都可视化,我直接pandas分组统计后保存到num.csv
计划下一步使用flask传入html数据,使用我自己的数据进行地图展示,如果不想使用flask的也可以手动录入数据

你可能感兴趣的:(python,数据分析)