echarts制作中国地图
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
echarts制作中国地图
今天突然想学习⼀下echarts制作图标，之前就⽤highcharts写过折线图、饼状图和柱状图。
第⼀步：去官⽹下载echarts的包：/download.html
第⼆步：引⼊插件包：<script type="text/javascript" src="echarts.min.js"></script>
第三步：官⽹已经将我国各个省份封装成了js，json⽂件，只需下载即可（建议下载js⽂件，因为json⽂件需要部署到服务器上⾯去才可使⽤）下载地址：/download-map.html
第三步：引⼊下载的china.js⽂件：<script type="text/javascript" src="china.js"></script>
第四步：在html中给定⼀个div的宽度和⾼度，⽤来放置地图：
<!DOCTYPE html>
<html>
<head>
<title>中国地图</title>
<style >
.china{
height: 500px;
width: 1000px;
border: #ccc 1px solid;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="china" id="chinaMap"></div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript" src="myChina.js"></script>
</html>
第五步：js读出地图：
$(document).ready(function(){
var chart = echarts.init(document.getElementById('chinaMap'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
如果是下载的json⽂件，则第五步需如下：
$.get('china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('chinaMap'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
⽂件路径取下：
最后样式：。