码迷,mamicode.com
首页 > 其他好文 > 详细

echarts 地图功能实现

时间:2016-07-15 13:07:00      阅读:663      评论:0      收藏:0      [点我收藏+]

标签:

1. 引入echarts插件(注意编码格式,个人建议UTF-8对中文的兼容性更好一点)

2.建立一个有高度和宽度的dom(建议div)

3.获取地图json文件,设置option,展示地图。各个省的地图json数据官网有下载。

废话不多说,直接上代码

<script type="text/javascript" src="./javaScript/echarts.min.js" charset="utf-8"/>

<div id="mainMap" style="width:400px;height:400px">

  

//用山东地图展示各个地市的人口数量
$.get(‘/map/shandong.json‘, function (mapJson) {
    echarts.registerMap(‘shandong‘, mapJson);
    var chart = echarts.init(document.getElementById(‘mainMap‘));//在id为mainMap的dom元素中显示地图
    chart.setOption({
    	tooltip: {
        	trigger: ‘item‘,
        	formatter: function(params) {//回调函数,参数params具体格式参加官方API
        		//鼠标放到某个地市上,显示这个地市的名称加人口数3
				//例如 params.name:当前地市名称。params.value:你传入的json数据与当前地市匹配的一项。
				//params.data.value:你传入的json数据与当前地市匹配的一项中‘value‘对应的数据
        		return params.name+":"+params.data.value;
        	}
		},
        series: [{
            type: ‘map‘,
            map: ‘shandong‘,//要和echarts.registerMap()中第一个参数一致
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
        	},
        	data : dataParam//人口数据:例如[{name:‘济南‘,value:‘100万‘},{name:‘菏泽‘,value:‘100万‘}......]
        }]
    }),
    chart.on(‘click‘, function (params) {//回调函数,点击时触发,参数params格式参加官方API
    	alert(params.name);//弹出当前点击城市的名称
    });
});

  效果图: 

 技术分享

 

echarts 地图功能实现

标签:

原文地址:http://www.cnblogs.com/shn-bbg/p/5672932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!