echarts制作中國地圖


今天突然想學習一下echarts制作圖標,之前就用highcharts寫過折線圖、餅狀圖和柱狀圖。

第一步:去官網下載echarts的包:http://echarts.baidu.com/download.html

第二步:引入插件包:<script type="text/javascript" src="echarts.min.js"></script>

第三步:官網已經將我國各個省份封裝成了js,json文件,只需下載即可(建議下載js文件,因為json文件需要部署到服務器上面去才可使用)下載地址:http://echarts.baidu.com/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' }] }); });

文件路徑取下:

最后樣式:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM