feat(数据可视化技术): 添加网店运营大屏前端和后端基础结构

- 新建前端项目配置文件和样式文件
- 创建后端 Flask 应用和数据库连接管理器
- 定义多个 API 路由以获取销售数据

数据可视化技术/网店运营大屏（Flask框架）/frontend/js/sales_month.js

@@ -0,0 +1,190 @@
+// 发送 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)); // 捕获并处理错误