echarts结合高度地图api实现可点击切换到省市区的全国销售数据统计图效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：echarts结合高度地图api实现可点击切换到省市区的全国销售数据统计图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>

<script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch"></script>
<script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a" type="text/javascript"></script> 
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-gl.js"></script>

<style type="text/css">
	body{background-color: #191919}
	#chart-panel {
    width: 100%;
    height: 770px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin-top: 10px;
    background-size: 100% auto;background-color: #0E0E29
} 
	#chart-panel .back{opacity: 0.5; position:absolute;left: 25px;top: 20px;color:#b3efff;font-size: 16px;cursor: not-allowed;z-index:100;}
</style>
</head>
<body> 
<div id="chart-panel"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("chart-panel"));
$('<div class="back">返 回</div>').appendTo($('#chart-panel')); 

$('.back').click(function() {
  $(this).css({"cursor":"not-allowed","opacity":"0.5"})
  if (parentInfo.length === 1) {return;}
  parentInfo.pop()
  init(parentInfo[parentInfo.length - 1].code)
})
  
var geoJson = {}
var parentInfo = [{cityName: '全国',code: 100000}]
var currentIndex = 0
var timeTitle = ['2015', '2016', '2017', '2018', '2019']

init(100000)
function init(adcode){
  getGeoJson(adcode).then(data => {
	geoJson = data
	getMapData()
  }) 
}
	
//这里封装了，直接可以拿过来用
function getGeoJson(adcode, childAdcode = '') {
  	return new Promise((resolve, reject) => {
		function insideFun(adcode, childAdcode) {
			AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
				var districtExplorer = new DistrictExplorer();
				districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
				if (error) {
					console.error(error);
					reject(error);
					return;
				}
				let Json = areaNode.getSubFeatures();
				if (Json.length === 0) {
					let parent = areaNode._data.geoData.parent.properties.acroutes;
					insideFun(parent[parent.length - 1], adcode);
					return;
				}
				if (childAdcode) {
					Json = Json.filter(item => {
					return item.properties.adcode == childAdcode;
					});
				}
				let mapJson = {
					features: Json
				};
				resolve(mapJson);
				});
			});
		}
		insideFun(adcode, childAdcode);
  	});
}
	  
//获取数据    
function getMapData() {
	let mapData = [],
		pointData = [],
		sum = 0
	geoJson.features.forEach(item => {
		let value = Math.random() * 3000
		mapData.push({
			name: item.properties.name,
			value: value,
			cityCode: item.properties.adcode
		})
		pointData.push({
			name: item.properties.name,
			value: [item.properties.center[0], item.properties.center[1], value],
			cityCode: item.properties.adcode
		})
		sum += value
	})
	mapData = mapData.sort(function(a, b) {return b.value - a.value});
	initEchartMap(mapData, sum, pointData)
}
	  
//渲染echarts
function initEchartMap(mapData, sum, pointData) {
	var xData = [],
		yData = []
	var min = mapData[mapData.length - 1].value
	var max = mapData[0].value
	if (mapData.length === 1) {min = 0}
	mapData.forEach(c => {   
		xData.unshift(c.name.replace(/(省|市|自治区|回族|维吾尔|壮族|特别行政区)/g,'')) 
		yData.unshift(c.value)
	})
	//这里做个切换，全国的时候才显示南海诸岛  只有当注册的名字为china的时候才会显示南海诸岛
	echarts.registerMap(parentInfo.length === 1 ? 'china' : 'map', geoJson);
  
  	var option = {
		// 正下方时间自动轮播
		timeline: {
		  data: timeTitle,
		  axisType: 'category',
		  autoPlay: true,
		  playInterval: 5000,
		  left: '10%',
		  right: '10%',
		  bottom: '2%',
		  width: '80%',
		  label: {
		    normal: {
		      textStyle: {
		        color: 'rgb(179, 239, 255)'
		      }
		    },
		    emphasis: {
		      textStyle: {
		        color: '#fff'
		      }
		    }
		  },
		  currentIndex: currentIndex,
		  symbolSize: 10,
		  lineStyle: {
		    color: '#8df4f4'
		  },
		  checkpointStyle: {
		    borderColor: '#8df4f4',
		    color: '#53D9FF',
		    borderWidth: 2,
		  },
		  controlStyle: {
		    showNextBtn: true,
		    showPrevBtn: true,
		    normal: {
		      color: '#53D9FF',
		      borderColor: '#53D9FF'
		    },
		    emphasis: {
		      color: 'rgb(58,115,192)',
		      borderColor: 'rgb(58,115,192)'
		    }
		  },
		}, 
		baseOption: {
			// backgroundColor: '#012248',
			title: [{
				left: 'center',
				top: 20,
				text: parentInfo[parentInfo.length - 1].cityName + '销售额统计图(可点击到县)',
				textStyle: {
					color: '#b3efff',
					fontSize: 16
				},
			},
			{
				text: "销售总额：" + sum.toFixed(2) + '万',
				left: 'center',
				top:45,
				textStyle: {
					color: '#FFAC50',
					fontSize: 20
				}
			}],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'none'// 默认为直线，可选为：'line' | 'shadow'
				},
			},
			legend: {
				show: true,
				icon: 'roundRect',
				itemWidth: 25,
				itemHeight: 15,
				itemGap: 9,
				bottom: '10',
				right: '20', 
				textStyle: {
					fontSize: 14,
					color: '#b3efff'
				},
				data: ['单数', '销售额'],
			}, 
			grid: [{
				show: false,
				right: '21%',
				top: '12%',
				bottom: '8%',
				containLabel: true,
				width: '15%'
			}, {
				show: false,
				right: '18.5%', //调整中间文字位置
				top: '14%', //使中间文字对齐
				bottom: '8%',
				width: '0%',  
			}, {
				show: false,
				right: '2%',
				top: '12%',
				bottom: '8%',
				containLabel: true,
				width: '15%'
			}],
			toolbox: {
				feature: {
					restore: {
						show: false
					},
					dataView: {
						show: false
					},
					saveAsImage: {
						name: parentInfo[parentInfo.length - 1].cityName + '销售额统计图'
					},
					dataZoom: {
						show: false
					},
					magicType: {
						show: false
					}
				},
				iconStyle: {
					normal: {
						borderColor: '#1990DA' //右上角下载的颜色
					}
				},
				top: 15,
				right: 35
			},
			geo: {
				map: parentInfo.length === 1 ? 'china' : 'map',
				zoom: 1.1,
				roam: true,
				left:'10%',
				top:'15%',
				tooltip: {
					trigger: 'item',
					formatter: (p) => {
						let val = p.value[2];
						if (window.isNaN(val)) {val = 0;}
						let txtCon = "<div style='text-align:left'>" + p.name + ":<br />单数：" + val.toFixed(2) + "单<br />销售额：" + val.toFixed(2) + '万</div>';
						return txtCon;
					}
				},
				label: {
					normal: {
						show: true,
						color: "#f9f9f9", //省份标签字体颜色
						formatter: p => {
						switch (p.name) {
							case '内蒙古自治区':
							p.name = "内蒙古"
							break;
							case '西藏.........完整代码请登录后点击上方下载按钮下载查看