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

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

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

@@ -0,0 +1,110 @@
+// 发送 AJAX 请求获取数据
+fetch('http://127.0.0.1:5000/api/sales_product')
+	.then(response => response.json())
+	.then(data => {
+	console.log("sales_product"+data)
+	var myChart = echarts.init(document.getElementById('data_product'));
+	var color = [
+	    "#00C6FB",
+	    "#5781FD",
+	    "#4DB1CB",
+	//  "#3EBD7C",
+	//  "#F7A925",
+	//  "#bda29a",
+	//  "#ca8622",
+	//  "#749f83",
+	//  "#6e7074",
+	//  "#546570",
+	//  "#c4ccd3"
+	];
+	
+	option = {
+	    tooltip: {
+//	          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+//	            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+//	          },
+//	        textStyle:{
+//	        	color:'#0099FF',
+//	        	fontSize:10,
+//	        }
+	        },
+	    series: [{
+	    name: '销售额',
+	    type: 'treemap',
+	    roam:false,
+	    nodeClick:false,
+	    breadcrumb:false,
+	    left:0,
+	    right:0,
+	    top:0,
+	    bottom:0,
+	    itemStyle: {
+	        borderColor: '#062e62'
+	    },
+	    label:{
+	    	fontSize:8,
+	    	color:'#fff',
+	    },
+	    levels: [{
+	            color: color,
+	            itemStyle: {
+	                normal: {
+	                    borderWidth: 0,
+	                    borderColor: '#062e62',
+	                    gapWidth: 2
+	                }
+	            }
+	        },
+	        {
+	            //colorSaturation: [0.35, 0.6],
+	            colorAlpha: [1, 0.5],
+	            upperLabel: {
+	                normal: {
+	                    color: '#00C6FB',
+	                    fontSize:10,
+	                    show: true,
+	                    height: 15
+	                }
+	            },
+	            itemStyle: {
+	                normal: {
+	                    borderWidth: 5,
+	                    borderColor: '#062e62',
+	                    gapWidth: 1,
+	                },
+	                emphasis: {
+	                    borderColor: '#ccc'
+	                }
+	            }
+	        }
+	    ],
+	    leafDepth: 2,
+	    data: data
+	}]
+	};
+	//指定的配置项
+	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
+	    });
+	}, 1000);
+})