产品运维与网络安全,  网站特效

【大数据】echarts大数据地图设置地图阴影,增加立体感以及在地图上打点

一、最终效果如下:

二、前台代码

<div id="echartMap" ></div>

三、引用JS

3.1需要引用的JS

<script type="text/javascript" src="js/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" ></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/map.js" type="text/javascript"></script>
<script src="js/index2.js" type="text/javascript" charset="utf-8"></script>

前三个JS,可以通过网络直接下载,下面针对后两个JS进行分解

3.2 map.js

(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;
	}
	echarts.registerMap(
		'郑州', // 城市名称
		{"type":"FeatureCollection..."}
		// 直接替换json文件内的内容
	);
}));

需要替换的json数据,直接通过阿里云,参考我之前发的文章【大数据】DataV.GeoAtlas 全国GeoJSON数据(县区级)及应用

3.3 index2.js

var hotItemsVue = new Vue({
	el: '#index_box',
	data: {

	},
	created: function() {

	},
	components: {

	},
	methods: {

	},
	mounted: function() {		
		echartMap();	
	},
})



function echartMap() {
	// 基于准备好的dom,初始化echarts实例
	var myChart = echarts.init(document.getElementById('echartMap'));
	var app = {};
	option = null;
	//	myChart.showLoading();
	var points = [
	//	区域中心点位置及样式
	{
		"name": "中原区",
		"value": [113.546928, 34.780838, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#01d4f9",
			}
		},
		symbolSize: 15,
	}, {
		"name": "二七区",
		"value": [113.594631, 34.678241, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#01d4f9"
			}
		}
	}, {
		"name": "管城回族区",
		"value": [113.75524, 34.696862, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#05d2fb"
			}
		}
	}, {
		"name": "金水区",
		"value": [113.743756, 34.810783, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#05d2fb"
			}
		}
	}, {
		"name": "上街区",
		"value": [113.284108, 34.788622, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#fbfc01"
			}
		}
	}, {
		"name": "惠济区",
		"value": [113.621348, 34.891191, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#1e8ae8"
			}
		}
	}, {
		"name": "中牟县",
		"value": [114.004302, 34.713431, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#00CED1",
			},
		}
	}, {
		"name": "巩义市",
		"value": [113.033344, 34.697305, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#e79435",

			}
		}
	}, {
		"name": "荥阳市",
		"value": [113.351681, 34.799765, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#01bb6e"
			}
		}
	}, {
		"name": "新密市",
		"value": [113.433255, 34.508082, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#00dcff"
			}
		}
	}, {
		"name": "新郑市",
		"value": [113.729471, 34.453334, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#00dcff"
			}
		}
	}, {
		"name": "登封市",
		"value": [113.035049, 34.412311, 2],
		"symbolSize": 10,
		"itemStyle": {
			"normal": {
				"color": "#00dcff"
			}
		}
	}];
	//	区域中心点位置
	var geoCoordMap = {
		'中原区': [113.546928, 34.780838],
	    '二七区': [113.594631, 34.678241],
	    '管城回族区': [113.75524, 34.696862],
	    '金水区': [113.743756, 34.810783],
	    '上街区': [113.284108, 34.788622],
	    '惠济区': [113.621348, 34.891191],
	    '中牟县': [114.004302, 34.713431],
	    '巩义市': [113.033344, 34.697305],
	    '荥阳市': [113.351681, 34.799765],
	    '新密市': [113.433255, 34.508082],
	    '新郑市': [113.729471, 34.453334],
	    '登封市': [113.035049, 34.412311],
	};
	//	区域数据调用
	var series = [{
			name: '郑州市',
			type: 'map',
			geoIndex: 2,
			map: '郑州', // 自定义扩展图表类型,
			aspectScale: 1,
			roam:false,
			data: [
				{
					name: '中原区',
					value: 2,
					today: 12,
					month: 255,
					year: 9665
				},
				{
					name: '二七区',
					value: 5,
					today: 13,
					month: 255,
					year: 9123665
				},{
					name: '管城回族区',
					value: 7,
					today: 192,
					month: 22325,
					year: 123665
				},{
					name: '金水区',
					value: 3,
					today: 123,
					month: 135,
					year: 161235
				},{
					name: '上街区',
					value: 6,
					today: 17,
					month: 2525,
					year: 961235
				},
				{
					name: '惠济区',
					value: 8,
					today: 42,
					month: 2532,
					year: 94365
				},
				{
					name: '中牟县',
					value: 4,
					today: 13,
					month: 255,
					year: 9123665
				},

				{
					name: '巩义市',
					value: 1,
					today: 132,
					month: 2525,
					year: 96665
				},
				{
					name: '荥阳市',
					value: 9,
					today: 22,
					month: 252,
					year: 9643565
				},
			],
			itemStyle: {
				normal: {
					areaColor: new echarts.graphic.LinearGradient(
						0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(30,83,227,1)' //	设置色块颜较浅
							},
							{
								offset: 0.5,
								color: 'rgba(30,83,227,1)'//	设置色块颜中等
							},
							{
								offset: 1,
								color: 'rgba(46,97,239,1)' //	设置色块颜较深
							}
						]
					), //'#fff' linear-gradient(to bottom right, red , blue);
					borderColor: '#0b9efb',
					borderWidth: 1,
					shadowBlur: 1,
					shadowColor: '#7cccff', 
				},
				emphasis: {
					areaColor: '#053167'
				}
			},
			label: {
                normal: {
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                }
            },
		},
		{
			type: 'scatter',
			coordinateSystem: 'geo',
			data: points,
			symbolSize: 10,
			symbol: 'circle',
			effect: {
				show: true,
				shadowBlur: 0
			},
			itemStyle: {
				normal: {
//					color: "red",
					borderColor: "rgba(23,68,199,0.5)",
					borderWidth: 5,
				}
			},
			label: {
				normal: {
					formatter: '{b}',
					position: 'top',
					show: true,
					color: "#fff"
				},
				emphasis: {
					show: true
				}
			},
		}
	];
	myChart.setOption(option = {
		tooltip: {
			show: true,
			formatter: function(params) {
				var html = "<span style='color:#fff'>" + params.data.name + "</span>" + "</br>项目数:" + params.data.today + "</br>载体数:" +
					params.data.month + "</br>客商数:" + params.data.year + "</br>";
				return [html].join('');
			},
		},		
		geo: { //引入地图的文件,需要在map.js里面配置json数据
			map: '郑州',
			roam:false,
			zoom: 1,
			aspectScale: 1,
			itemStyle: {
				normal: {
					borderColor: '#6c8ae2', //	设置阴影边框
					shadowColor: '#1843b6', //	设置阴影颜色
					shadowBlur: 1,
					shadowOffsetY: 12, //	设置阴影宽度
					shadowOffsetX: 6,
				},
				emphasis: {
					areaColor: '#57baff'
				}
			},
		},
		series: series
	})
	myChart.setOption(option);
}

 

Avatar photo

人生长恨水长东

留言

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据