echarts制作中国地图

最新推荐文章于 2024-08-14 19:18:20 发布

abgo98357

最新推荐文章于 2024-08-14 19:18:20 发布

阅读量202

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/ryt103114/p/6374770.html

版权

今天突然想学习一下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' }] }); });