// 发送 AJAX 请求获取数据
// 这段代码的目的是从指定的 API 端点获取销售区域数据，并将这些数据分解为三个独立的数组：
// region（区域名称）、sales（销售额）和 profit（利润）。
fetch('http://127.0.0.1:5000/api/sales_region')
	.then(response => response.json())
	.then(data => {
		var region=[];
		var sales=[];
		var profit=[];
		data.forEach(item => {
			region.push(item.region);
			sales.push(parseFloat(item.sales));
			profit.push(parseFloat(item.profit));
		});
		console.log("======sales_region======")
		console.log(region);
		console.log(sales);
		console.log(profit);
//		console.log([region,sales,profit])

	var myChart = echarts.init(document.getElementById('data_region'));
	var option = {
	     tooltip: {
	          trigger: 'axis',
	          axisPointer: { // 坐标轴指示器，坐标轴触发有效
	            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
	          },
	        textStyle:{
	        	color:'#0099FF',
	        	fontSize:10,
	        }
	        },
	        grid: {
	          left: '2%',
	          right: '4%',
	          bottom: '14%',
	          top:'16%',
	          containLabel: true
	        },
	         legend: {
		        data: ['销售额', '利润'],
		        right: 10,
		        top:12,
		        textStyle: {
	            color: "#fff",
	            fontSize:10,
	        },

	        itemWidth: 12,
	        itemHeight: 10,
	        // itemGap: 35
	    },
	        xAxis: {
	          type: 'category',
	          data: region,
	          axisLine: {
	            lineStyle: {
	              color: 'white'
	
	            }
	          },
	          axisLabel:{
            	fontSize:8,
            	color:'#2094CA',
            },
	        },
	
	        yAxis: {
	          type: 'value',
	          axisLine: {
	            show: true,
	            lineStyle: {
	              color: 'white'
	            }
	          },
	          splitLine: {
	            show: true,
	            lineStyle: {
	              color: 'rgba(255,255,255,0.3)'
	            }
	          },
	          axisLabel:{
            	fontSize:8,
            	color:'#2094CA',
            },
	        },
	        series: [{
	          name: '销售额',
	          type: 'bar',
	          barWidth: '15%',
	          label:{show:false},
	          itemStyle: {
	            normal: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: '#fccb05'
	                }, {
	                    offset: 1,
	                    color: '#f5804d'
	                }]),
	                barBorderRadius: 12,
	            },
	            
	          },
	          data:sales,
	        },
	        {
	          name: '利润',
	          type: 'bar',
	          barWidth: '15%',
	          label:{show:false},
	          itemStyle: {
	            normal: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: '#8bd46e'
	                }, {
	                    offset: 1,
	                    color: '#09bcb7'
	                }]),
	                barBorderRadius: 11,
	            }
	            
	          },
	          data: profit,
	        }]
	      };
	 	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
			    });
			}, 2000);     
		      
		myChart.setOption(option)	
})