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

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

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

@@ -0,0 +1,128 @@
+// 发送 AJAX 请求获取数据
+// 这段代码的作用是从指定的 API 端点（http://127.0.0.1:5000/api/sales_manager）获取销售经理相关的数据，
+// 并将这些数据整理成三个独立的数组：sales_data、profit_data 和 sales_manager。
+fetch('http://127.0.0.1:5000/api/sales_manager')
+	.then(response => response.json())
+	.then(data => {
+		var sales_data = [];
+		var profit_data = [];
+		var sales_manager = [];
+		data.forEach(item => {
+			temp = {};
+			temp1 = {};
+			temp['value'] = parseFloat(item.sales);
+			temp['name'] = item.sales_manager;
+			temp1['value'] = parseFloat(item.profit);
+			temp1['name'] = item.sales_manager;
+			sales_data.push(temp);
+			profit_data.push(temp1);
+			sales_manager.push(item.sales_manager);
+		});
+		console.log("======sales_manager======");
+		console.log(sales_manager);
+		console.log(sales_data);
+		console.log(profit_data);
+		var myChart = echarts.init(document.getElementById('data_manager'));
+		var option = {
+			color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
+			title: {
+				text: '           销售情况                                          利润情况',
+				left: 'left',
+				textStyle: {
+					color: '#0099FF',
+					fontSize: 10,
+				}
+			},
+			tooltip: {
+				trigger: 'item',
+				formatter: '{a} <br/>{b} : {c} ({d}%)'
+			},
+			legend: {
+				left: 'center',
+				top: 'bottom',
+				data: sales_manager,
+				textStyle: {
+					color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
+				},
+				padding: 0,
+				itemGap: 3,
+				itemWidth: 30,
+
+
+			},
+			series: [
+				{
+					name: '销售额',
+					type: 'pie',
+					radius: [5, 85],
+					center: ['30%', '50%'],
+					roseType: 'area',
+					label: {
+						show: false
+					},
+					labelLine: {
+						normal: {
+							show: false,
+						},
+						emphasis: {
+							show: false
+						}
+					},
+					emphasis: {
+						label: {
+							show: false
+						}
+					},
+					data: sales_data,
+				},
+				{
+					name: '利润',
+					type: 'pie',
+					radius: [5, 85],
+					center: ['80%', '50%'],
+					roseType: 'area',
+					label: {
+						show: false,
+					},
+					labelLine: {
+						normal: {
+							show: false,
+						},
+						emphasis: {
+							show: false
+						}
+					},
+					data: profit_data,
+				}
+			]
+		};
+		myChart.setOption(option);
+		var currentIndex = -1;
+		var pie_index = -1;
+		var pie_index1 = 0
+		setInterval(function () {
+			var dataLen = option.series[1].data.length;
+			pie_index = pie_index == 11 ? 0 : (pie_index + 1)
+			//	    console.log(currentIndex1)
+			// 取消之前高亮的图形
+			myChart.dispatchAction({
+				type: 'downplay',
+				seriesIndex: pie_index1,
+				dataIndex: currentIndex
+			});
+			currentIndex = (currentIndex + 1) % dataLen;
+			pie_index1 = parseInt(pie_index / 6)
+			// 高亮当前图形
+			myChart.dispatchAction({
+				type: 'highlight',
+				seriesIndex: pie_index1,
+				dataIndex: currentIndex
+			});
+			// 显示 tooltip
+			myChart.dispatchAction({
+				type: 'showTip',
+				seriesIndex: pie_index1,
+				dataIndex: currentIndex
+			});
+		}, 2000);
+	})