echarts生成漂亮的地图

var tj = './json/tianjin.json';
var mapname = tj;
var myChart = null;var mapDate = [{name: '蓟州区',value: [117.415079,39.98415],datas: 1354,img: 'image://asset/data-1619059442567-s5l7-f8Eu9.png',},{name: '宝坻区',value: [117.282058,39.700447],datas: 1402,img: 'image://asset/data-1619059442567-s5l7-f8Eu9.png',},{name: '武清区',value: [117.029095,39.397779],datas: 2468,img: 'image://asset/data-1619059838735-QE9mBZmhh.png',},{name: '北辰区',value: [117.167272,39.255155],datas: 768,img: 'image://asset/data-1619321685306-EvjlgDOXi.png',},{name: '津南区',value: [117.352629,38.907695],datas: 1500,img: 'image://asset/data-1619059838735-QE9mBZmhh.png',},{name: '滨海新区',value: [117.760388,39.118867],datas: 1500,img: 'image://asset/data-1619321685306-EvjlgDOXi.png',},
];var domImg = document.createElement('img');
domImg.style.height = domImg.height = domImg.width = domImg.style.width = '8px';
domImg.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII=';var domImgHover = document.createElement('img');
domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px';
domImgHover.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII=';var img2 = 'image://asset/data-1619318279159-o6ZbTGoO0.png';
let index = -1;setTimeout(function () {mapInit();
}, 1000);
var mapInit = () => {$.getJSON(mapname, function (geoJson) {echarts.registerMap('tj', geoJson);myChart =  echarts.init($("#map1")[0]);console.info(echarts.version);myChart.hideLoading();option = {backgroundColor: '#2957A2',title: {top: 20,text: '天津市',subtext: '',x: 'center',textStyle: {color: '#fff',fontWeight: 100,fontSize: 14,},},geo: {map: 'tj',aspectScale: 0.75, layoutCenter: ['50%', '50.5%'], layoutSize: '100%',silent: true,roam: false,z: 0,itemStyle: {normal: {areaColor: 'rgba(0, 15, 40, 0.5)',shadowColor: 'rgba(0, 0, 0, 1)',shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 5,borderColor: 'rgba(0, 0, 0, 0.7)',borderWidth: 0.5,},emphasis: {areaColor: '#2AB8FF',borderWidth: 1,color: 'green',label: {show: true,},},},},series: [{type: 'map',roam: true,label: {normal: {show: false,textStyle: {color: '#fff',},},emphasis: {textStyle: {color: '#fff',},},},itemStyle: {normal: {borderColor: '#2ab8ff',borderWidth: 1,areaColor: {image: domImg,repeat: 'repeat',},shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 1,},emphasis: {areaColor: {image: domImgHover,repeat: 'repeat',},borderColor: '#2ab8ff',borderWidth: 1,shadowColor: 'rgba(0, 255, 255, 0.7)',shadowBlur: 10,shadowOffsetX: 0,shadowOffsetY: 1,label: {show: false,},},},zoom: 1.2,roam: false,map: 'tj',},{tooltip: {show: false,},type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {scale: 10,brushType: 'stroke',},showEffectOn: 'render',itemStyle: {normal: {shadowColor: '#0ff',shadowBlur: 10,shadowOffsetX: 0,shadowOffsetY: 0,color: function (params) {var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: '#64fbc5',},{offset: 1,color: '#018ace',},]),new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: '#64fbc5',},{offset: 1,color: '#018ace',},]),new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: '#168e6d',},{offset: 1,color: '#c78d7b',},]),new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: '#61c0f1',},{offset: 1,color: '#6f2eb6',},]),new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: '#168e6d',},{offset: 1,color: '#c78d7b',},]),new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: '#61c0f1',},{offset: 1,color: '#6f2eb6',},]),];return colorList[params.dataIndex];},},},label: {normal: {color: '#fff',},},symbol: 'circle',symbolSize: [10, 5],data: mapDate,zlevel: 1,},{type: 'scatter',coordinateSystem: 'geo',itemStyle: {},symbol: function (value, params) {return params.data.img;},symbolSize: [32, 41],symbolOffset: [0, -20],z: 9999,data: mapDate,},{type: 'scatter',coordinateSystem: 'geo',label: {normal: {show: true,formatter: function (params) {var name = params.name;var value = params.data.datas;var text = `{fline|${value}}\n{tline|${name}}`;return text;},color: '#fff',rich: {fline: {padding: [0, 25],color: '#fff',textShadowColor: '#030615',textShadowBlur: '0',textShadowOffsetX: 1,textShadowOffsetY: 1,fontSize: 14,fontWeight: 400,},tline: {padding: [0, 27],color: '#ABF8FF',fontSize: 12,},},},emphasis: {show: true,},},itemStyle: {color: '#00FFF6',},symbol: img2,symbolSize: [100, 50],symbolOffset: [0, -60],z: 999,data: mapDate,},],};myChart.setOption(option);});
};

实现的效果：

地图数据下载地址：http://datav.aliyun.com/tools/atlas/index.html

echarts生成漂亮的地图相关推荐

使用echarts生成漂亮的3D地图
使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图效果准备资料第三方插件 <script type="tex ...
echarts生成湖南省地图
利用echarts生成湖南省地图,默认选中长沙市,点击各市可切换选中的市,选中的市会高亮显示. 注意:益阳市名称显示有点偏差,应该是我那个json文件数据导致的,各位重新去找一份地图的json数据就行 ...
如何在echarts生成得到地图上添加标记
在echarts生成的图形上如果利用本地的图片达到标记的效果想要达到的效果 1.首先我们可以在全局先把这个图片引进来 2.在我们的那个生成图形的方法里面可以这样 let markImg='image ...
关于echarts生成地图的二三事
1.地图数据的获取中国地图及各省市县地图可在地图选择器(数据来源于高德开放平台) 选择需要的区域,右方可下载其JSON API格式的数据. 2.地图的编辑特定需求下需要对原有地图数据进行修改,如: ...
python程序创建词云中国地图_就这么简单！使用Python生成漂亮的词云
原标题:就这么简单!使用Python生成漂亮的词云作者:Linux迷链接:https://www.linuxmi.com 词云是一种数据可视化技术,用于表示文本数据,其中每个单词的大小表示其出现的 ...
echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts.map！
导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现,pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一.不可否认,pyecharts绘制的地 ...
“地图易“制图工具——零代码制作漂亮业务地图
"地图易"制图工具--零代码制作漂亮业务地图 "地图易"制图工具实现零代码制作漂亮业务地图,提供标记.聚合.热力.六边形.线样式.面样式等丰富的地图样式,制图成 ...
echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts！
点击上方"数据管道",选择"置顶星标"公众号干货福利,第一时间送达导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现, ...
ECharts 全国各县市地图
ECharts 全国各县市地图获取底图数据 1.http://datav.aliyun.com/tools/atlas 2.http://geojson.io 加载地图数据 JavaScript 引 ...

echarts生成漂亮的地图

echarts生成漂亮的地图相关推荐

最新文章

热门文章