// 发送 AJAX 请求获取数据
fetch('http://127.0.0.1:5000/api/sales_month')
	.then(response => response.json())
	.then(data => {
		var month = [];
		var sales = [];
		var profit = [];
		data.forEach(item => {
			month.push(item.month);
			profit.push(parseFloat((item.profit / 10000).toFixed(2)));
			sales.push(parseFloat((item.sales / 10000).toFixed(2)));
		});
		console.log("======sales_month======")
		console.log(month);
		console.log(sales);
		console.log(profit);
		var myChart = echarts.init(document.getElementById('data_month'));
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#6a7985'
					}
				}
			},
			legend: {
				data: ['销售额（万元）', '利润（万元）'],
				x: 'center',
				y: 'top',
				padding: [5, 0, 0, 0],
				textStyle: {
					color: '#00F1F3', // 修改为正确的颜色代码
					fontSize: 10,
				},
				itemWidth: 28,
				itemHeight: 12,
			},
			grid: {
				show: false,
				left: 0,
				right: 20,
				bottom: 0,
				top: '15%',
				containLabel: true,
			},
			tooltip: {
				show: true,
				trigger: 'axis',
				axisPointer: {
					type: 'line',
					label: {
						show: true,
						fontSize: 8,
					},
					lineStyle: {
						color: '#2094CA',
						type: 'dotted',
					},
				},
				textStyle: {
					fontSize: 10,
				},
			},
			xAxis: [{
				type: 'category',
				axisLabel: {
					interval: 0,
					fontSize: 8,
					color: '#2094CA',
				},
				data: month,
			}],
			yAxis: [{
				splitLine: { show: false },
				type: 'value',
				axisLabel: {
					fontSize: 8,
					color: '#2094CA',
				},
			}],
			series: [{
				name: '销售额（万元）',
				type: 'line',
				symbol: 'circle',
				symbolSize: 4,
				itemStyle: {
					normal: {
						color: '#E78932',
					},
				},
				lineStyle: {
					color: '#E78932',
					width: 1,
				},
				label: {
					show: false,
					position: 'top',
					textStyle: {
						color: '#E78932',
					},
					fontSize: 8,
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: '#D98234' // 0% 处的颜色
						}, {
							offset: 1, color: '#33313C' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					},
					opacity: 0.5,
				},
				data: sales,
				showAllSymbol: true,
			}, {
				name: '利润（万元）',
				type: 'line',
				symbol: 'circle',
				symbolSize: 4,
				itemStyle: {
					normal: {
						color: '#0099FF',
					},
				},
				label: {
					show: false,
					position: 'top',
					textStyle: {
						color: '#0099FF',
					},
					fontSize: 8,
				},
				lineStyle: {
					color: '#0099FF',
					width: 0,
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: '#0099FF' // 0% 处的颜色
						}, {
							offset: 1, color: '#394E7F' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					},
					opacity: 0.3,
				},
				data: profit,
				showAllSymbol: true,
			}]
		};
		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
			});
		}, 2000);
	})
	.catch(error => console.error('Error fetching data:', error)); // 捕获并处理错误