// 发送 AJAX 请求获取数据
fetch('http://127.0.0.1:5000/api/sales_province')
	.then(response => response.json())
	.then(data => {
		var sales = [];
		//将数据整理为地图的数据
		var sales_province = [];
		var profit_province = [];
		data.forEach(item => {
			sales.push(parseFloat(item.sales));
			sales_set = {};
			profit_set = {};
			sales_set['name'] = item.province;
			sales_set['value'] = item.sales;
			profit_set['name'] = item.province;
			profit_set['value'] = item.profit;
			sales_province.push(sales_set);
			profit_province.push(profit_set);
		});
		//添加总销售额的数据,用于在图表上方显示
		var sales_total = Math.round(d3.sum(sales) / 10000);
		console.log("=======sales_province========");
		console.log(sales_province);
		console.log("=======profit_province========");
		console.log(profit_province);
		console.log("sales_total:"+sales_total);
		
		//	console.log([sales_province,profit_province])
		var myChart = echarts.init(document.getElementById('data_province'));
		var mapName = 'china'
		var geoCoordMap = {};
		/*获取地图数据*/
		myChart.showLoading();
		var mapFeatures = echarts.getMap(mapName).geoJson.features;
		myChart.hideLoading();
		mapFeatures.forEach(function (v) {
			// 地区名称
			var name = v.properties.name;
			// 地区经纬度
			geoCoordMap[name] = v.properties.cp;

		});
		var max = 480,
			min = 9; // todo 
		var maxSize4Pin = 100,
			minSize4Pin = 20;

		var convertData = function (data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var geoCoord = geoCoordMap[data[i].name];
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value),
					});
				}
			}
			return res;
		};
		option = {
			//			backgroundColor: '#013954',
			tooltip: {
				padding: 0,
				enterable: true,
				transitionDuration: 1,
				textStyle: {
					color: '#000',
					decoration: 'none',
				},
				formatter: function (params) {
					var tipHtml = '';
					tipHtml = '<div style="width:180px;height:120px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
						+ '<div style="width:90%;height:30px;line-height:30px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 10px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:30px;">' + '</i>'
						+ '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
						+ '<div style="padding:10px">'
						+ '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
						+ '销售额：' + '<span style="color:#11ee7d;margin:0 6px;">' + sales_province[params.dataIndex].value + '</span>' + '元' + '</p>'
						+ '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
						+ '利润：' + '<span style="color:#f48225;margin:0 6px;">' + profit_province[params.dataIndex].value + '</span>' + '元' + '</p>'
						+ '</div>' + '</div>';
					return tipHtml;
				}

			},

			visualMap: {
				show: true,
				min: 0,
				max: 300000,
				left: '10%',
				top: 'bottom',
				calculable: true,
				seriesIndex: [1],
				inRange: {
					color: ['#04387b', '#467bc0'] // 蓝绿
				},
				textStyle: {
					color: '#fff'
				}
			},
			geo: {
				show: true,
				map: mapName,
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false,
					}
				},
				roam: false,
				itemStyle: {
					normal: {
						areaColor: '#023677',
						borderColor: '#1180c7',
					},
					emphasis: {
						areaColor: '#4499d0',
					}
				}
			},
			series: [{
				name: '散点',
				type: 'scatter',
				coordinateSystem: 'geo',
				data: convertData(profit_province),
				symbolSize: function (val) {
					return val[2] / 8000;
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: true
					},
					emphasis: {
						show: true
					}
				},
				//		            animation: false,
				itemStyle: {
					normal: {
						color: '#fff'
					}
				}
			},
			{
				type: 'map',
				map: mapName,
				geoIndex: 0,
				aspectScale: 0.5, //长宽比
				showLegendSymbol: false, // 存在legend时显示
				label: {
					normal: {
						show: true
					},
					emphasis: {
						show: false,
						textStyle: {
							color: '#fff'
						}
					}
				},
				roam: true,
				itemStyle: {
					normal: {
						areaColor: '#031525',
						borderColor: '#FFFFFF',
					},
					emphasis: {
						areaColor: '#2B91B7'
					}
				},
				animation: false,
				data: sales_province
			},
			{
				name: '点',
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 6,
			},
			{
				name: 'Top 5',
				type: 'effectScatter',
				//		            animation: false,
				coordinateSystem: 'geo',
				data: convertData(profit_province),
				symbolSize: function (val) {
					return val[2] / 8000;
				},
				showEffectOn: 'render',
				rippleEffect: { //涟漪特效
					period: 4, //动画时间，值越小速度越快
					brushType: 'stroke', //波纹绘制方式 stroke, fill
					scale: 4 //波纹圆环最大限制，值越大波纹越大
				},
				hoverAnimation: true,
				label: {
					normal: {
						formatter: '{b}',
						position: 'left',
						show: false
					}
				},
				itemStyle: {
					normal: {
						color: 'yellow',
						shadowBlur: 10,
						shadowColor: 'yellow'
					}
				},
				zlevel: 1
			},

			]
		};
		myChart.setOption(option)
		var currentIndex = -1;
		setInterval(function () {
			var dataLen = option.series[0].data.length;
			// 取消之前高亮的图形
			myChart.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				dataIndex: currentIndex
			});
			currentIndex = (currentIndex + 1) % dataLen;
			// 高亮当前图形
			myChart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: currentIndex
			});
			// 显示 tooltip
			myChart.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: currentIndex
			});
		}, 1000);


		//为id为title1的div添加文字	
		var title1 = document.getElementById("title1");
		title1.innerHTML = "2023年总销售额是<b style='color:#f48225;font-size:24px'>&nbsp;" + sales_total + "&nbsp;</b>万元" + 
		"<br/><br/>" + "审图号：<b style='color:#ffffff;font-size:14px'>&nbsp;GS(2023)2767号&nbsp;</b>";
		title1.style.color = "#467bc0";
		title1.style.fontSize = "14px";
		title1.style.fontWeight = "bold"
	})