使用echarts加载地图

最新推荐文章于 2025-02-06 10:26:57 发布

吴举人

最新推荐文章于 2025-02-06 10:26:57 发布

阅读量7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端框架文章标签： echarts 地图

本文链接：https://blog.youkuaiyun.com/qq_40393093/article/details/83056742

本文介绍了如何使用echarts 2.2.7版本来加载中国地图，强调了高版本中可能缺失的地图实例，并推荐了模块化单文件引入的方式。在实际应用中，开发者需要根据API进行个性化配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts这样的插件很好用，在这直奔重点，以下为注意事项：
1.echarts高版本的是没有中国地图的实例的，使用echarts做低版本的中国地图，需要引入低版本的echarts，这里用的版本是是echarts-2.2.7。
2.引入echarts的方法有三种，模块化包引入，模块化单文件引入（推荐），标签式单文件引入在实例中的代码，引入的方法一般为第二种(不同的引入方式会导致报错)，具体http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2。
3.echarts中的demo只是简单例子，平常我们使用时要对照的官网上的api根据自己的需求去调试js。
以下是一个中国地图的例子，效果图如下：

//设置一个DOM
<table>
	<tr>
		<td width="50%">
			<div id="china-map" style="width: 100%; height: 350px;"></div>
		</td>
		<td width="50%">
			<div id="rmap" style="width: 100%; height: 350px;"></div>
		</td>
	</tr>
</table>

然后引入js，写js代码

<script language="JavaScript" src="<%=request.getContextPath()%>/Script/component/echarts-2.2.7/build/dist/echarts.js"></script>
<script>
$(document).ready(function(){
	echartsChina();
	echartsrmap();
});

require.config({
    paths: {
        echarts: '<%=request.getContextPath()%>/Script/component/echarts-2.2.7/build/dist'
    }
});
//初始化加载的右边图形的函数
function echartsrmap(){
	 require(
          [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar',
            'echarts/chart/scatter',
            'echarts/chart/k',
            'echarts/chart/pie',
            'echarts/chart/radar',
            'echarts/chart/force',
            'echarts/chart/chord',
            'echarts/chart/gauge',
            'echarts/chart/funnel',
            'echarts/chart/eventRiver',
            'echarts/chart/venn',
            'echarts/chart/treemap',
            'echarts/chart/tree',
            'echarts/chart/wordCloud',
            'echarts/chart/heatmap',
            'echarts/chart/map'
          ],
          function (ec) {
             var myChart = ec.init(document.getElementById('rmap'));
				var option = {
				title : {
					text: '',
					subtext: '',
					x:'center'
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				toolbox: {
					feature: {
						saveAsImage: {},
						restore: {},
						dataView: {}
					}
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: ['北京','天津','上海','重庆','河北', '河南','云南','辽宁','黑龙江','湖南','安徽','山东','新疆','江苏','浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', 
			'贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门']
				},
				series : [
					{
						name: '所占比例',
						type: 'pie',
						radius : '55%',
						center: ['50%', '60%'],
						data:[
						   {name: '北京',value: Math.round(Math.random()*2000)},
								{name: '天津',value: Math.round(Math.random()*2000)},
								{name: '上海',value: Math.round(Math.random()*2000)},
								{name: '重庆',value: Math.round(Math.random()*2000)},
								{name: '河北',value: 0},
								{name: '河南',value: Math.round(Math.random()*2000)},
								{name: '云南',value: 5},
								{name: '辽宁',value: 305},
								{name: '黑龙江',value: Math.round(Math.random()*2000)},
								{name: '湖南',value: 200},
								{name: '安徽',value: Math.round(Math.random()*2000)},
								{name: '山东',value: Math.round(Math.random()*2000)},
								{name: '新疆',value: Math.round(Math.random()*2000)},
								{name: '江苏',value: Math.round(Math.random()*2000)},
								{name: '浙江',value: Math.round(Math.random()*2000)},
								{name: '江西',value: Math.round(Math.random()*2000)},
								{name: '湖北',value: Math.round(Math.random()*2000)},
								{name: '广西',value: Math.round(Math.random()*2000)},
								{name: '甘肃',value: Math.round(Math.random()*2000)},
								{name: '山西',value: Math.round(Math.random()*2000)},
								{name: '内蒙古',value: Math.round(Math.random()*2000)},
								{name: '陕西',value: Math.round(Math.random()*2000)},
								{name: '吉林',value: Math.round(Math.random()*2000)},
								{name: '福建',value: Math.round(Math.random()*2000)},
								{name: '贵州',value: Math.round(Math.random()*2000)},
								{name: '广东',value: Math.round(Math.random()*2000)},
								{name: '青海',value: Math.round(Math.random()*2000)},
								{name: '西藏',value: Math.round(Math.random()*2000)},
								{name: '四川',value: Math.round(Math.random()*2000)},
								{name: '宁夏',value: Math.round(Math.random()*2000)},
								{name: '海南',value: Math.round(Math.random()*2000)},
								{name: '台湾',value: Math.round(Math.random()*2000)},
								{name: '香港',value: Math.round(Math.random()*2000)},
								{name: '澳门',value: Math.round(Math.random()*2000)}
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			myChart.setOption(option);
          }
      );
	
	
}

//根据左边地图选择省份传入数据显示右边的饼图
function echartsrmapt(data1,data2){
	 require(
          [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar',
            'echarts/chart/scatter',
            'echarts/chart/k',
            'echarts/chart/pie',
            'echarts/chart/radar',
            'echarts/chart/force',
            'echarts/chart/chord',
            'echarts/chart/gauge',
            'echarts/chart/funnel',
            'echarts/chart/eventRiver',
            'echarts/chart/venn',
            'echarts/chart/treemap',
            'echarts/chart/tree',
            'echarts/chart/wordCloud',
            'echarts/chart/heatmap',
            'echarts/chart/map'
          ],
          function (ec) {
             var myChart = ec.init(document.getElementById('rmap'));
				var option = {
				title : {
					text: '',
					subtext: '',
					x:'center'
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				toolbox: {
					feature: {
						saveAsImage: {},
						restore: {},
						dataView: {}
					}
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: data1
				},
				series : [
					{
						name: '所占比例',
						type: 'pie',
						radius : '55%',
						center: ['50%', '60%'],
						data:data2,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			myChart.setOption(option);
          }
      );

}

//加载中国地图
function echartsChina(){
	 require(
        [
            'echarts',
            'echarts/chart/wordCloud', 
            'echarts/chart/map'// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('china-map'));
            var ecConfig = require('echarts/config');
        	var zrEvent = require('zrender/tool/event');
        	//var myChart = echarts.init(document.getElementById('china-map'));
        	var curIndx = 0;
        	var mapType = [
        	    'china',
        	    // 23个省
        	    '广东', '青海', '四川', '海南', '陕西', 
        	    '甘肃', '云南', '湖南', '湖北', '黑龙江',
        	    '贵州', '山东', '江西', '河南', '河北',
        	    '山西', '安徽', '福建', '浙江', '江苏', 
        	    '吉林', '辽宁', '台湾',
        	    // 5个自治区
        	    '新疆', '广西', '宁夏', '内蒙古', '西藏', 
        	    // 4个直辖市
        	    '北京', '天津', '上海', '重庆',
        	    // 2个特别行政区
        	    '香港', '澳门'
        	];
        	document.getElementById('china-map').onmousewheel = function (e){
        		return false;   //这个方法我取消了滑动切换地图
        	    var event = e || window.event;
        	    curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
        	    if (curIndx < 0) {
        	        curIndx = mapType.length - 1;
        	    }
        	    var mt = mapType[curIndx % mapType.length];
        	    if (mt == 'china') {
        	        option.tooltip.formatter = '滑动鼠标或点击进入该省<br/>{b}';
        	    }
        	    else{
        	        option.tooltip.formatter = '滑动鼠标或点击返回全国<br/>{b}';
        	    }
        	    option.series[0].mapType = mt;
        	    option.title.subtext = mt + ' （滑动鼠标或点击切换）';
        	    myChart.setOption(option, true);
        	    
        	    zrEvent.stop(event);
        	};
			//下面这个是选择省份触发的事件
        	myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
				alert("选择省份触发的事件");
        		var len = mapType.length;
        	    var mt = mapType[curIndx % len];
        	    if (mt == 'china') {
        	        // 全国选择时指定到选中的省份
        	        var selected = param.selected;
        	        /* var mapSeries = option.series[0];
           		    var data = [];
           		    var legendData = [];
           		    var name;
					var datat =[];
           		    for (var p = 0, len = mapSeries.data.length; p < len; p++) {
           		        name = mapSeries.data[p].name;
           		        //mapSeries.data[p].selected = selected[name];
           		        parentid = mapSeries.data[p].parentid;
           		        
           		        if(parentid=='2'){
           		        	data.push({
           		                name: name,
           		                parentid:parentid,
           		                value: mapSeries.data[p].