echarts-map

最新推荐文章于 2023-07-23 10:02:16 发布
最新推荐文章于 2023-07-23 10:02:16 发布
阅读量722 收藏
点赞数
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43857787/article/details/119320927
版权

echarts-map
//全局初始值
var center_xy=[104.20,35.86];
var map_id=‘china’;
var tongji_zhu_color=getRandomColor();
var shi_arr={};
var map_adcode;
var map_type = ‘duanluchuanganqi’;

(function (root, factory) {
if (typeof define === ‘function’ && define.amd) {
// AMD. Register as an anonymous module.
define([‘exports’, ‘echarts’], factory);
} else if (typeof exports === ‘object’ && typeof exports.nodeName !== ‘string’) {
// CommonJS
factory(exports, require(‘echarts’));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== ‘undefined’) {
console && console.error && console.error(msg);
}
}
if (!echarts) {
log(‘ECharts is not Loaded’);
return;
}
if (!echarts.registerMap) {
log(‘ECharts Map is not loaded’)
return;
}
center_xy=[104.20,35.86];
show_map(100000,center_xy);
fz(‘100000’);

}));
//adcode：当前区域的code
//center_xy：当前区域的中心坐标
function show_map(adcode,center_xy,type)
{

	//var adcode = 510000;

	console.log(adcode);
	$.get('https://geo.datav.aliyun.com/areas_v2/bound/'+adcode+'_full.json',function (geoJson) {
		console.log(geoJson);
        map_adcode = adcode
		map_id='china';
		map_name=adcode;
        // var json_length = geoJson.length()
        // fz("adcode")
		//var center_xy=;//当前城市中心坐标点
		var rawData=[];//统计数据
		var geoCoordMap={};// 市区坐标
		shi_arr={};
		$.each(geoJson.features, function(index, item){
			 var temp_=item.properties.name;
			 if(temp_!='')
			 {
			 	geoCoordMap[temp_]=item.properties.center;
			 
				 rawData.push([temp_,Math.ceil(Math.random()*30)]);//统计数据对接
				 //
				 shi_arr[temp_]=item.properties.adcode;
			 }
			 return geoCoordMap;
		 })
		console.log(rawData);
		console.log(geoCoordMap);
		echarts.registerMap(map_name,geoJson);
		tongji_zhu_color=getRandomColor();
		create_tongji_map(map_id,map_name,center_xy,geoCoordMap,rawData,shi_arr,tongji_zhu_color);
        fz(adcode)
		//create_tongji_map(map_id,map_name,center_xy,geoCoordMap,rawData);
	}).error(function (xhr, status, info) {

        　　 if(xhr.status == 404){
                // console.log(1)
    　　　　　//do something
    var point = [
        [104.080989, 30.657689],
        [104.055731, 30.667648],
        [104.043487, 30.692058]
    ]
    var point1 = [
        [104.080989, 30.657689],
        [104.055731, 30.667648],
        [104.043487, 30.692058]
    ]
    var point2 = [
        [104.080989, 30.657689],
        [104.055731, 30.667648],
        [104.043487, 30.692058]
    ]
    var point3 = [
        [104.080989, 30.657689],
        [104.055731, 30.667648],
        [104.043487, 30.692058]
    ]
    $("#china").hide()
    $(".control").hide()
    gaodemap(center_xy,point,point1,point2,point3,1)
    console.log(1)
    
    　　　}
    })
}
//随机颜色值
function getRandomColor(){
var str="#";
var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for(var i=0;i<6;i++){
    var num=parseInt(Math.random()*16);
    str+=arr[num];
}
return str;

}

//type 1: point,type 2: point1 ,type 3: point2,type 4: point3

//生成导航地图
function gaodemap(center_xy,point,point1,point2,point3,type){
$(’#Amap’).show()
console.log(center_xy)

var myMap = new AMap.Map('Amap',{
    resizeEnable: true,
    zoom: 14,
    mapStyle: 'amap://styles/darkblue',
    center: center_xy,
    });
    if(type == "1"){
        markerlist(point,'img/info_1.png')
    }
    var markers = [];
    for (var i = 0; i < point.length; i += 1) {
        var lnglat = point[i];
        var marker = new AMap.Marker({
            position: new AMap.LngLat(lnglat[0], lnglat[1]),
            icon:'img/info_2.png',
        });    
        markers.push(marker) 
   }
   // 创建覆盖物群组，并将 marker 传给 OverlayGroup
        var overlayGroups = new AMap.OverlayGroup(markers);
        myMap.add(overlayGroups);

        // 创建覆盖物
            function markerlist(list,img){
                    markers = [];
                    for (var i = 0; i < list.length; i += 1) {
                        var lnglat = list[i];
                        var marker = new AMap.Marker({
                            position: new AMap.LngLat(lnglat[0], lnglat[1]),
                            icon:img,
                        });    
                        markers.push(marker) 
                }
                    overlayGroups = new AMap.OverlayGroup(markers);
                myMap.add(overlayGroups);

            }
        document.querySelector("#icon1").onclick = function() {
            myMap.remove(overlayGroups);
                markerlist(point,'img/info_2.png')
                myMap.setFitView();
            } 
            document.querySelector("#icon2").onclick = function() {
                myMap.remove(overlayGroups);
                
                    markerlist(point1,'img/info_4.png')
                    myMap.setFitView();
                } 
                document.querySelector("#icon3").onclick = function() {
                    myMap.remove(overlayGroups);
                    
                        markerlist(point2,'img/info_5.png')
                        myMap.setFitView();
                    }
                    document.querySelector("#icon4").onclick = function() {
                        myMap.remove(overlayGroups);
                     
                            markerlist(point3,'img/info_6.png')
                            myMap.setFitView();
                        } 
}



var myChart;
// 市区坐标
var geoCoordMap = {};
var rawData = {};
var data_array={};
var tongji_zhu_color='F75D5D';
function makeMapData(rawData) {
    var mapData = [];
    for (var i = 0; i < rawData.length; i++) {
        var geoCoord = geoCoordMap[rawData[i][0]];
        if (geoCoord) {
            mapData.push({
                name: rawData[i][0],
                value: geoCoord.concat(rawData[i].slice(1))
            });
        }
    }
    return mapData;
};
//map_id：地图所在DIV的ID
//map_name：注册地图的时候的name
//center_xy：区域中心坐标
//geoCoordMap_me：对象，存储有下级城市和各个城市的中心坐标
//rawData_me：数组，存储有城市名称和统计数据
//data_arr,color：柱状图的颜色
function create_tongji_map(map_id,map_name,center_xy,geoCoordMap_me,rawData_me,data_arr,color)
{
	myChart=echarts.init(document.getElementById(map_id));
	myChart.clear();
	geoCoordMap={};
	geoCoordMap=geoCoordMap_me;
	rawData=[];
	rawData=rawData_me;
	data_array={};
	data_array=data_arr;
	console.log('xhccl');
	console.log(data_array);
	tongji_zhu_color=color;
	option = {
		animation: false,
		// 地图背景颜色
		backgroundColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.4, [{
			offset: 0,
			color: '#4b5769'
		}, {
			offset: 1,
			color: '#404a59'
		}]),
		tooltip: {
			trigger: 'axis'
		},
		geo: {
			map: map_name,
			// silent: true,
			roam: false,
			zoom: 1, // 地图初始大小
			center: center_xy, // 初始中心位置
			label: {
				emphasis: {
					show: false,
					areaColor: '#eee'
				}
			},
			// 地区块儿颜色
			itemStyle: {
				normal: {
					areaColor: '#55C3FC',
					borderColor: '#fff'
				},
				emphasis: {
					areaColor: '#21AEF8'
				}
			},
			data:data_array
		},
		series: []
	};
	
	//
	setTimeout(renderEachCity, 0);
	//
	var throttledRenderEachCity = throttle(renderEachCity, 0);
	myChart.on('geoRoam', throttledRenderEachCity);
	myChart.setOption(option);


	// 点击显示柱状图
	myChart.on('click',function(e){
		console.log(e)
		// console.log(params);
		if(e.componentSubType == "bar"){
			// 先清除所有柱状图
			$('.tongJiTu').remove();
			// 创建遮挡层
			creatWrap();
			// 创建柱状图容器
			var divObj = document.createElement('div');
			$(divObj).addClass('tongJiTu');
			divObj.id = 'zhuzhuang';
			var divX = getMousePos()['x']; 
			var divY = getMousePos()['y']; 
			$(divObj).css({
				'width': 250,
				'height': 180,
				'border': '1px solid #ccc',
				'position': 'absolute',
				'top': divY,
				'left': divX
			}).appendTo('.wrap');
			// 创建柱状图
			zhuZhuangTu();
			// 点击遮挡层消失
			clearWrap('.zhedang');
		}
		return;
	});
}

function renderEachCity() {
    var option = {
        xAxis: [],
        yAxis: [],
        grid: [],
        series: []
    };
    // var inflationStartIdx = 14;
    // var inflationYearCount = 3;
    // var inflationYearStart = '2006';
    // var xAxisCategory = [];
    // for (var i = 0; i < inflationYearCount; i++) {
    //     xAxisCategory.push((+inflationYearStart + i) + '');
    // }

    echarts.util.each(rawData, function(dataItem, idx) {
        var geoCoord = geoCoordMap[dataItem[0]];
        var coord = myChart.convertToPixel('geo', geoCoord);
		console.log(dataItem[0]+'_xhccl_'+coord);
        idx += '';

        
		for(var i = 0; i < rawData.length; i++)
		{
			if(rawData[i][0]==dataItem[0])
			{
				inflationData=[rawData[i][1]];
			}
		}
		
        option.xAxis.push({
            id: idx,
            gridId: idx,
            type: 'category',
            name: dataItem[0],
            // nameStyle: {
            //     color: 'red',
            //     fontSize: 12
            // },
            nameLocation: 'middle',
            nameGap: 1,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#666'
                }
            },
            // data: xAxisCategory,
            data: ["数据A"],
            z: 100

        });
        option.yAxis.push({
            id: idx,
            gridId: idx,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#1C70B6'
                }
            },
            z: 100
        });
        option.grid.push({
            id: idx,
            width: 10,
            height: inflationData[0]*1,
            left: coord[0] - 15,
            top: coord[1] - 15,
            z: 100
        });
        option.series.push({
            id: idx,
            type: 'bar',
            xAxisId: idx,
            yAxisId: idx,
            barGap: 0,
            barCategoryGap: 0,
            // data: inflationData,
            data: inflationData,
            z: 100,
            itemStyle: {
                normal: {
                    color: function(params){
                        // 柱状图每根柱子颜色
                        var colorList = [tongji_zhu_color];
                        return colorList[params.dataIndex];
                    }
                }
            }
        });
    });
    console.time('a');
    myChart.setOption(option);
    console.timeEnd('a');
	// 地图点击事件
     myChart.off('click')
     myChart.on('click',function(params){
       console.log(params)
       //$("#shi").html( '>&nbsp;&nbsp;&nbsp;&nbsp;' + params.data.name)
       //if (params.data.level != 'district') {
		 var map_center = geoCoordMap[params.name];
		 var map_code=data_array[params.name];
		 console.log(map_center);
         show_map(map_code,map_center)
       
     })
}


// 缩放和拖拽
function throttle(fn, delay, debounce) {

    var currCall;
    var lastCall = 0;
    var lastExec = 0;
    var timer = null;
    var diff;
    var scope;
    var args;

    delay = delay || 0;

    function exec() {
        lastExec = (new Date()).getTime();
        timer = null;
        fn.apply(scope, args || []);
    }

    var cb = function() {
        currCall = (new Date()).getTime();
        scope = this;
        args = arguments;
        diff = currCall - (debounce ? lastCall : lastExec) - delay;

        clearTimeout(timer);

        if (debounce) {
            timer = setTimeout(exec, delay);
        } else {
            if (diff >= 0) {
                exec();
            } else {
                timer = setTimeout(exec, -diff);
            }
        }

        lastCall = currCall;
    };

    return cb;
}


// 获取横纵坐标
function getMousePos(e) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    // console.log(x,y)
    return {'x': x,'y': y};
}
// 生成柱状图
function zhuZhuangTu() {
    var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'));
    option = {
        backgroundColor: 'rgba(255,255,255,.3)',
        legend: {
            data: ['数据A','数据B','数据C']
        },
        xAxis: [
            {

                type: 'category',
                data: ['数据A','数据B','数据C']
            }
        ],
        yAxis: [
            {
                splitLine: {
                    show: false
                },
                type: 'value'
            }
        ],
        series: [
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params){
                            var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
                            return colorList[params.dataIndex];
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#000'
                            }
                        }
                    }
                },
                data: [10,20,30]
            }
        ]
    };
    zhuzhuang.setOption(option);
}
}
weixin_43857787
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echart之map地图图表使用教程
ll_883963的博客
07-15 2760
官方解释你可以有选择地退出默认的深度响应式/只读转换模式，并将原始的，未被代理的对象嵌入状态图中。它们可以根据情况灵活运用：有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。(第三方实例)当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。解决方案在实例化echart时，将其指定为非响应式的import {
echarts-map.zip
09-30
echarts的中国地图资源
echarts map （echarts地图）使用总结
HurryUpp的博客
12-11 1万+
echarts 地图的各种使用场景
Echarts：惊艳的Map
前端御书房
11-26 1579
大家在网上看天气预报的时候应该就看到过在中国地图上显示不同省份的温度，并根据温度的高低显示不同的颜色，又或者看到各个省份的新冠肺炎新增人数，根据不同的新增人数显示不同的颜色之类的图像。然后注册地图数据，地图数据是一个json文件，json数据中包含各个省份的坐标、名称、省会城市等信息，在使用前需要先注册在echarts中。要在geo上根据数据的大小显示不同的颜色，需要使用visualMap，visualMap把数据映射成对应的图元，即可以显示的图像信息。我们可以在pieces中配置不同数据需要显示的颜色。
echarts图表和map地图
你还有我
04-06 2645
echarts和map地图基础
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
weixin_41897680的博客
06-01 1万+
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
Echarts-Map-Icon:Echarts Map地图，自定义标图（图片），自动循环显示，ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物, 欢迎小伙伴们参与进来，一起完善
08-04
Echarts-Map-Icon 基于Echarts.js 的 Map地图，在上面添加自定义标图（图片），并自动循环提示相关信息！ Echarts Map地图，自定义标图（图片），自动循环显示，ECharts如何自定义省、市、县区地图(各省市直辖区的...
echarts-map地图省、市、区县JSON
12-11
echarts-map地图省、市、区县地图的json数据，可直接使用制作地图
echarts-map-demo:echarts地图geoJson行政边界数据的实时获取与应用，省市区县多级联动下钻，真正意义的下钻至县级【附最新geoJson文件下载】
05-02
echarts map 通过地图 API 获取实时最新的 geojson 数据，摆脱 geojson 文件数据过期的烦恼。 省市区县下钻。实现真正的下钻至县级，而不是只到市级。 亦可下载最新 geojson 数据。 项目介绍： 体验地址： 页面效果...
echarts_map
10-02
使用echarts时，需要用到地图结合热力图，所以上传一份地图并附上部分demo
ECharts使用心得(echart map)
02-06
ECharts使用心得 上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。
echarts-map地图生成工具
06-30
ECharts 3地图生成工具,官网不让用了,可以在这里下载,双击index.html运行
使用Echarts在地图上实现Marker标注
一只想躺平却不敢躺平的小菜鸟
06-21 4635
使用Echarts在地图上实现Marker标注
echarts升级5.0之后 map的使用
最新发布
偏执
07-23 235
v5 移除了内置的 geoJSON（原先在 echarts/map 文件夹下），如果使用者仍然需要他们，可以去从老版本中得到（下载文件中的map文件，引入本地），或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。echarts 5.0 之后移除了包内的Map文件夹，导致需要你自己去搞Json数据。
Echarts3实例 map地图加载点数据
idomyway的博客
12-18 2万+
前言 &nbsp;&nbsp;&nbsp;&nbsp;Echarts map地图展示坐标点，并能更具不同的属性值进行区分，展示点数据依赖于Echarts的散点图scatter、effectScatter，底图依赖于geo。 &nbsp;&nbsp;&nbsp;&nbsp;geo：地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。 &nbsp;&nbsp;&nbsp;...
Echart地图组件的使用
暗夜91的博客
04-25 1万+
1、基本应用（中国地图+世界地图） ​ echarts中想要使用地图首先需要准备地图对应的js文件，js文件可以到github上克隆下来，地址为： https://github.com/Luna829/incubator-echarts ，地图的js文件存放在 map/js路径下。 1）效果要求： 2）代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
echarts之map
一念永恒的博客
09-14 4849
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="echarts.js"&gt;&l
vue-amap中添加高德地图地图的自定义样式
热门推荐
web前端学习总结
08-20 3万+
vue-amap中添加高德地图地图的自定义样式 高德地图的自定义样式列表： 使用： amap://styles/+ 样式的名称 如： 使用标准颜色 amap://styles/normal 依次类推 标准 normal 幻影黑 dark 月光银 light 远山黛 whitesmoke 草色青 fresh 雅士灰 grey 涂鸦 graffiti 马卡龙 maca...
echarts-extension-amap
07-20
echarts-extension-amap 是一个基于 ECharts 的扩展库，用于在 ECharts 中使用高德地图进行数据可视化。通过 echarts-extension-amap，你可以在 ECharts 图表中展示高德地图的数据。 要在 Vue 3 中使用 echarts-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值