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

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

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

@@ -0,0 +1,153 @@
+// 发送 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)	
+})