3月28日
前端
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>食品销售数据可视化</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f5f7fa; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { background-color: #2c3e50; color: white; padding: 20px 0; text-align: center; margin-bottom: 30px; border-radius: 5px; } h1 { margin: 0; font-size: 28px; } .dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; } .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 20px; } .chart-container { height: 400px; width: 100%; } .summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; } .stat-card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 15px; text-align: center; } .stat-value { font-size: 24px; font-weight: bold; color: #2c3e50; margin: 10px 0; } .stat-label { font-size: 14px; color: #7f8c8d; } table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0; } th { background-color: #2c3e50; color: white; font-weight: bold; } tr:nth-child(even) { background-color: #f8f9fa; } tr:hover { background-color: #f1f1f1; } .highlight { color: #e74c3c; font-weight: bold; } .section-title { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-top: 30px; } </style> </head> <body> <div class="container"> <header> <h1>食品销售数据可视化分析</h1> <p>基于淘宝食品销售数据的多维度分析</p> </header> <div class="summary-stats"> <div class="stat-card"> <div class="stat-label">商品总数</div> <div class="stat-value" id="total-products">0</div> </div> <div class="stat-card"> <div class="stat-label">平均价格</div> <div class="stat-value" id="avg-price">¥0.00</div> </div> <div class="stat-card"> <div class="stat-label">总销量</div> <div class="stat-value" id="total-sales">0</div> </div> <div class="stat-card"> <div class="stat-label">包邮比例</div> <div class="stat-value" id="free-delivery">0%</div> </div> </div> <h2 class="section-title">价格分布分析</h2> <div class="dashboard"> <div class="card"> <h3>价格区间分布</h3> <div class="chart-container"> <canvas id="priceDistributionChart"></canvas> </div> </div> <div class="card"> <h3>价格与销量关系</h3> <div class="chart-container"> <canvas id="priceSalesChart"></canvas> </div> </div> </div> <h2 class="section-title">销量分析</h2> <div class="dashboard"> <div class="card"> <h3>销量TOP10商品</h3> <div class="chart-container" id="topSalesChart"></div> </div> <div class="card"> <h3>销量分布</h3> <div class="chart-container"> <canvas id="salesDistributionChart"></canvas> </div> </div> </div> <h2 class="section-title">地区分布分析</h2> <div class="card"> <h3>商品来源地区分布</h3> <div class="chart-container" id="regionChart"></div> </div> <h2 class="section-title">商品数据明细</h2> <div class="card"> <table id="productTable"> <thead> <tr> <th>商品名称</th> <th>价格</th> <th>销量</th> <th>地区</th> <th>是否包邮</th> </tr> </thead> <tbody id="productTableBody"> <!-- 数据将通过JavaScript动态填充 --> </tbody> </table> </div> </div> <script> // 模拟数据 - 实际应用中应从后端API获取 const products = [ {type: "食品", title: "网红麻辣鸭肠下酒菜孜然鸭肠宿舍囤货追剧解馋辣味休闲零食小吃", price: 13.00, buy_len: 8, name: "栋锐食品", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "大胃王自热煲仔饭自热米饭懒人午餐速食快餐方便即食学生寝室自热", price: 4.14, buy_len: 3000, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "岩烧乳酪吐司夹心面包整箱学生早餐蛋糕健康零食小吃休闲夜宵", price: 17.90, buy_len: 100000, name: "派可利旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "去皮鸡腿开袋即食减卡脂低肥餐代餐健身饱腹零食熟食不腥柴大鸡腿", price: 4.03, buy_len: 200, name: "菜欢欢旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "天降四汇抱抱腿鸭翅根休闲食品卤味熟食零食小鸭腿", price: 3.38, buy_len: 10000, name: "淘宝买菜农场直发", address: "湖南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "味有道咸蛋黄拌面干拌面泡面方便面拉面整箱零食宿舍速食宵夜", price: 4.99, buy_len: 1000, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "鸡胸肉开袋即食鸡排零食小吃休闲卤味肉食熟食夜宵解馋充饥速", price: 7.80, buy_len: 90000, name: "渝每滋食品专营店", address: "湖北", ifFreeDelivert: "包邮"}, {type: "食品", title: "金厨娘虎皮凤爪网红独立包装卤香鸡爪散装香辣鸡脚卤味小零食整箱", price: 13.39, buy_len: 6000, name: "金厨娘旗舰店", address: "江苏", ifFreeDelivert: "不包邮"}, {type: "食品", title: "蛋黄酥甜品传统糕点网红休闲老少营养下午茶零食整箱官方旗舰店", price: 7.80, buy_len: 1000, name: "节点旗舰店", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "香辣大鸭翅即食卤味鸭货麻辣夜宵湖南解类馋熟食休闲肉零小吃", price: 10.80, buy_len: 20000, name: "板牙妹妹旗舰店", address: "江西", ifFreeDelivert: "包邮"}, {type: "食品", title: "盐焗味卤蛋五香鸡蛋鹌鹑蛋小包装整箱批发追剧小零食解馋夜宵营养", price: 5.49, buy_len: 40000, name: "淘宝买菜农场直发", address: "四川省", ifFreeDelivert: "包邮"}, {type: "食品", title: "熔岩巧克力味夹心面包老酸奶整箱早餐蛋糕零食小吃休闲糕点", price: 2.40, buy_len: 10000, name: "淘宝买菜农场直发", address: "福建省", ifFreeDelivert: "包邮"}, {type: "食品", title: "巧克力味豆曲奇饼干独立包装网红追剧休闲小零食代餐糕点整箱", price: 5.80, buy_len: 200, name: "小小莹零食", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "悠享时中秋节月饼礼盒装团购定制送人长辈伴手礼物中式糕点心食品", price: 127.00, buy_len: 10000, name: "yotime悠享时旗舰店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "虎皮鸡爪零食香辣卤香虎皮凤爪熟食鸡脚卤鸡爪夜宵解馋下酒菜小吃", price: 10.90, buy_len: 10000, name: "板牙妹妹旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "华夏百分蟹黄干脆面即食干吃面蟹黄味香脆面怀旧休闲童年零食整箱", price: 3.90, buy_len: 20000, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "金锣风味鸡肉肠50g火腿肠香肠烧烤肠串串火锅食材即食肠整箱批发", price: 3.60, buy_len: 20000, name: "淘宝买菜农场直发", address: "四川省", ifFreeDelivert: "包邮"}, {type: "食品", title: "林阿姆时蔬鲜虾饼果蔬虾仁空气炸锅食材儿童早餐半成品速冻虾排", price: 31.41, buy_len: 200, name: "林阿姆旗舰店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "白象方便面袋装汤好喝老母鸡牛肉猪骨金汤面速食夜宵泡面整箱批发", price: 7.80, buy_len: 900, name: "味初上食品专营店", address: "四川", ifFreeDelivert: "包邮"}, {type: "食品", title: "风干鸡胸肉干鸡肉干条宿舍减低0解馋脂卡热量耐嚼休闲小吃零", price: 10.80, buy_len: 200000, name: "炭食光食品旗舰店", address: "四川", ifFreeDelivert: "包邮"}, {type: "食品", title: "颂鹿肉松饼面包早餐饼干充饥夜宵糕点独立包装健康营养休闲小零食", price: 3.30, buy_len: 3000, name: "美食悦享Food Delight", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "奥尔良小鸡腿开袋即食卤味肉食熟食即食休闲小吃鸡肉麻辣小吃", price: 18.80, buy_len: 50000, name: "小石头食品旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "传统老婆饼老式糕点心软糯小吃休闲早餐面包美食休闲解馋零食品", price: 28.80, buy_len: 100, name: "节点旗舰店", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "牛乳千层吐司手撕面包整箱早餐营养健康零食充饥夜宵小吃休闲", price: 4.90, buy_len: 30000, name: "其妙旗舰店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "白象火鸡面袋装方便面咸蛋黄麻辣小龙虾多口味拌面组合冲泡速食", price: 3.22, buy_len: 1000, name: "米仓山食品专营店", address: "四川", ifFreeDelivert: "包邮"}, {type: "食品", title: "酒友鬼花生米500g罐装新货香辣花生米油炸去皮下酒菜休闲零食小吃", price: 8.79, buy_len: 7000, name: "东赛良品旗舰店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "黑全麦面包无糖精食品糖尿人专用旗舰店控糖尿饼病人零食大全孕妇", price: 49.80, buy_len: 800, name: "糖友铺", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "比比赞虎皮凤爪卤味香辣鸡爪子夜宵小吃追剧解馋充饥休闲零食批发", price: 4.90, buy_len: 20000, name: "比比赞旗舰店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "卤蛋五香盐焗鸡蛋宿舍解馋零食宵夜充饥开袋即食品早餐速食乡巴佬", price: 7.90, buy_len: 10000, name: "水益农旗舰店", address: "河南", ifFreeDelivert: "不包邮"}, {type: "食品", title: "老式红豆沙面包奶酪馅夹心整箱早餐糕点解饿零食充饥小吃休闲", price: 5.90, buy_len: 6000, name: "板牙妹妹旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "牙哥麻酱红油面皮宽面免煮冲泡速食寝室夜宵桶装盒装即食整箱", price: 2.88, buy_len: 900, name: "牙哥食品店", address: "河南", ifFreeDelivert: "包邮"}, {type: "食品", title: "香港好利来流心月饼礼盒装中式糕点心休闲中秋礼品送人团购", price: 24.90, buy_len: 60000, name: "乐字号旗舰店", address: "上海", ifFreeDelivert: "包邮"}, {type: "食品", title: "自热煲仔饭多口味网红懒人宿舍即食快餐晚寝室方便速食夜宵大份量", price: 4.10, buy_len: 5000, name: "漫时光食品专营店", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "丸子胡辣汤正宗河南特产速食免煮冲泡即食早餐食品桶装整箱旗舰店", price: 13.80, buy_len: 2000, name: "白觅萱旗舰店", address: "河南", ifFreeDelivert: "不包邮"}, {type: "食品", title: "乌龙茶酥雪媚娘传统糕点心解馋休闲零食早餐绿豆食品好吃整箱茶点", price: 7.01, buy_len: 10000, name: "天天特卖工厂店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "肉松海苔卷营养健康无不上火儿童小孩宝宝海味紫菜小吃零食品添加", price: 29.90, buy_len: 10000, name: "贝聪乐旗舰店", address: "江苏", ifFreeDelivert: "包邮"}, {type: "食品", title: "和风生巧福团巧克力雪梅娘面包早餐糕点心网红日式糯叽叽甜品零食", price: 5.90, buy_len: 20000, name: "板牙妹妹旗舰店", address: "福建", ifFreeDelivert: "不包邮"}, {type: "食品", title: "虎皮鸡爪零食香辣卤香虎皮凤爪熟食鸡脚卤鸡爪夜宵解馋下酒菜小吃", price: 5.80, buy_len: 8000, name: "小石头食品旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "三明治早餐面包鸡肉火腿夹心吐司营养代餐即速食品健康学生小零食", price: 6.80, buy_len: 5000, name: "板牙妹妹旗舰店", address: "安徽", ifFreeDelivert: "不包邮"}, {type: "食品", title: "桃酥饼干整箱散装老式传统早餐手工零食点心下午茶糕点独立包装", price: 3.89, buy_len: 9000, name: "兆尚客旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "比比赞香菇豆干豆腐干辣条小零食小吃休闲美", price: 5.90, buy_len: 200000, name: "比比赞旗舰店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "【天降30包】网红清真干吃面干脆面九洲五味掌心脆方便面小零食", price: 2.89, buy_len: 100000, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "特惠50包香辣鸭肫小包卤味鸭胗熟食网红休闲零食小吃批发3包", price: 2.39, buy_len: 3000, name: "淘宝买菜农场直发", address: "湖南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "味有道超辣火鸡面咸蛋黄小龙虾榴莲奶油蟹黄炸酱面干拌面方便面", price: 6.56, buy_len: 300, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "丝米达自热煲仔饭米饭方便速食懒人食品快餐免煮自热饭夜宵快煮", price: 9.03, buy_len: 300, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "新鲜日期无蔗糖坚果茯苓八珍糕黑芝麻核桃糕点老人儿童零食品", price: 7.48, buy_len: 11, name: "千寻千味食品会员店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "鸡肉肠鸡胸肉低脂肪健身代餐即食整箱批发", price: 2.40, buy_len: 8000, name: "淘宝买菜农场直发", address: "江苏省", ifFreeDelivert: "包邮"}, {type: "食品", title: "自热米饭煲仔饭大容量方便速食懒人米饭整箱即食实惠装多口味", price: 4.99, buy_len: 6000, name: "淘宝买菜农场直发", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "爆款海盐芝士棒咸甜味夹心休闲零食儿童追加解馋米果棒小吃茶点", price: 3.41, buy_len: 2000, name: "淘宝买菜农场直发", address: "福建省", ifFreeDelivert: "包邮"}, {type: "食品", title: "全麦小钢筋磨牙棒成人低脂压缩解馋0零食耐嚼高饱腹巨硬饼干热量", price: 5.80, buy_len: 200, name: "宁波农产品供销", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "0脂肪荞麦面方便面减泡面低脂免煮拌面条主食无糖精代餐饱腹", price: 6.99, buy_len: 5000, name: "淘宝买菜农场直发", address: "河北省", ifFreeDelivert: "包邮"}, {type: "食品", title: "【新品】白象方便面8袋大骨面原汁猪骨红烧牛肉面干吃泡面散装", price: 9.90, buy_len: 100000, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "雨润火腿肠即食香辣香脆肠玉米肠热狗肠整箱批香肠小零食小吃烤肠", price: 5.99, buy_len: 20000, name: "淘宝买菜农场直发", address: "江苏省", ifFreeDelivert: "包邮"}, {type: "食品", title: "生牛乳千层吐司手撕面包营养早餐健康休闲小吃代餐饱腹整箱速食品", price: 19.90, buy_len: 600, name: "虎小糯食品旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "爆浆山药蓝莓流心糕0添蔗糖面包酥糕点心食品健康休闲小吃零食", price: 6.90, buy_len: 200, name: "水益农旗舰店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "三明治早餐面包整箱鸡肉夹心吐司零食肉松懒人速食品充饥尝鲜糕点", price: 4.50, buy_len: 6000, name: "天天特卖工厂店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "手工鸡蛋卷一箱酥脆芝麻薄脆饼干早餐零食小吃凤凰卷特价整一箱批", price: 5.32, buy_len: 900, name: "见笑小舍", address: "河北", ifFreeDelivert: "包邮"}, {type: "食品", title: "老式手撕老面包拉丝早餐夜宵传统手工糕点代餐新鲜整箱休闲零", price: 5.60, buy_len: 3000, name: "舸渡旗舰店", address: "江苏", ifFreeDelivert: "包邮"}, {type: "食品", title: "蛋黄酥甜品传统糕点网红休闲老少营养下午茶零食整箱官方旗舰店", price: 7.80, buy_len: 1000, name: "节点旗舰店", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "坚果八珍糕官方旗舰店茯苓芡实祛糕点湿早餐代餐零食小吃休闲", price: 4.80, buy_len: 100, name: "江小邻旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "水牛乳老面包蛋白棒夹心营养早餐代餐奶棒整箱烘焙糕点心零食小吃", price: 5.90, buy_len: 20000, name: "极诱食品旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "今麦郎山西刀削面非油炸刀削宽面袋装方便面速食可煮泡面寻味中华", price: 20.90, buy_len: 100000, name: "今麦郎旗舰店", address: "河北", ifFreeDelivert: "包邮"}, {type: "食品", title: "传统老婆饼老式糕点心软糯小吃休闲早餐面包美食休闲解馋零食品", price: 28.80, buy_len: 100, name: "节点旗舰店", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "麻辣王子辣条面筋零食小吃大礼包儿时怀旧整箱麻辣味辣条休闲", price: 6.90, buy_len: 80000, name: "惠祥食品", address: "上海", ifFreeDelivert: "包邮"}, {type: "食品", title: "白象方便面袋装泡面大骨面原汁骨汤香辣骨汤红烧牛肉面速食", price: 5.60, buy_len: 300, name: "米仓山食品专营店", address: "四川", ifFreeDelivert: "包邮"}, {type: "食品", title: "红枣山药核桃饼官方旗舰店正品无加蔗糖传统手工糕点心代餐零", price: 7.80, buy_len: 6000, name: "板牙妹妹旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "兴峰大鸡腿奥尔良味100g开袋即食熟食肉干小吃休闲零食充饥解馋", price: 4.80, buy_len: 98, name: "天天特卖工厂店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "榴莲饼独立包装猫山王爆浆流心营养早餐面包小吃整箱网红休闲零食", price: 6.80, buy_len: 1000, name: "韩郎岭旗舰店", address: "湖南", ifFreeDelivert: "包邮"}, {type: "食品", title: "松鸡胸肉主食健身代餐即食解馋零食夜宵充饥速食鸡肉饱腹蛋白质", price: 7.51, buy_len: 60, name: "国货甄选旗舰店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "风干鸡肉干鸡胸肉条干宿舍减低解馋卡脂磨牙棒成人休闲小吃零", price: 9.80, buy_len: 20000, name: "菜青虫食品旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "批发价大鸡腿零食卤味盐焗琵琶腿即食整箱真空袋装鸡肉熟食", price: 11.40, buy_len: 400, name: "国货甄选旗舰店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "买3送4千湖味道麻辣小龙虾麻花锅巴蚕豆腰果零食礼包休闲食品", price: 8.93, buy_len: 300, name: "千湖味道旗舰店", address: "湖北", ifFreeDelivert: "包邮"}, {type: "食品", title: "薯片零食整箱批发休闲食品小吃儿童办公室吃货解馋小零食大全薯条", price: 9.80, buy_len: 8000, name: "享鲜人旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "水牛乳蛋白棒面包健康营养代餐饱腹早餐夹心糕点休闲零食小吃整箱", price: 16.90, buy_len: 1000, name: "炭食光食品旗舰店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "网红香辣内蒙古牛筋即食麻辣味营养小零食牛板筋小吃休闲蹄", price: 5.80, buy_len: 100000, name: "畅润堂旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "绿豆糕板栗酥饼整箱传统手工老式糕点独立包装好吃休闲零小吃", price: 4.18, buy_len: 20000, name: "慧每客旗舰店", address: "山东", ifFreeDelivert: "包邮"}, {type: "食品", title: "天降四汇抱抱腿鸭翅根休闲食品卤味熟食零食小鸭腿", price: 3.38, buy_len: 10000, name: "淘宝买菜农场直发", address: "湖南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "奥尔良小鸡腿即食卤味肉类零食小吃休闲食品整箱充饥夜宵好吃的", price: 6.20, buy_len: 1000, name: "国货甄选旗舰店", address: "浙江", ifFreeDelivert: "包邮"}, {type: "食品", title: "奥尔良小鸡腿即食熟食卤味零食小吃休闲食品批发充饥夜宵解馋辣味", price: 12.90, buy_len: 10000, name: "天天特卖工厂店", address: "浙江", ifFreeDelivert: "不包邮"}, {type: "食品", title: "蛋皮吐司肉松夹心卷面包整箱早餐代黑巧芋泥充饥零食小吃休闲", price: 9.80, buy_len: 1000, name: "俏美味旗舰店", address: "安徽", ifFreeDelivert: "包邮"}, {type: "食品", title: "肉松海苔卷营养健康无不上火儿童小孩宝宝海味紫菜小吃零食品添加", price: 29.90, buy_len: 10000, name: "贝聪乐旗舰店", address: "江苏", ifFreeDelivert: "包邮"}, {type: "食品", title: "生牛乳千层吐司营养早餐即食面包整箱晚上解饿零食休闲小吃", price: 3.80, buy_len: 20000, name: "星座食品专营店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "家城沙嗲素牛肉干网红辣条牛肉粒儿时怀旧校园沙爹素肉小零食", price: 5.90, buy_len: 1000, name: "淘宝买菜农场直发", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "冷卡0脂肪荞麦面方便面拌面条非油炸主食杂粮粗粮无糖代餐", price: 6.00, buy_len: 700, name: "淘宝买菜农场直发", address: "福建省", ifFreeDelivert: "包邮"}, {type: "食品", title: "偷嘴猴香菇豆干常重庆特产零食豆干小吃休闲零食整箱", price: 3.68, buy_len: 1000, name: "淘宝买菜农场直发", address: "重庆", ifFreeDelivert: "包邮"}, {type: "食品", title: "匠子有礼手工燕窝流心月饼中秋节送礼盒装苏式酥皮桃山皮水果糕点", price: 68.00, buy_len: 300, name: "匠子有礼旗舰店", address: "福建", ifFreeDelivert: "包邮"}, {type: "食品", title: "华夏百分干脆面干吃面烤羊肉串味怀旧香脆方便面小零食整箱", price: 3.89, buy_len: 20000, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "姚依雪脆皮虾味网红追剧儿时回忆小零食怀旧宿舍解馋膨化批发", price: 2.99, buy_len: 4000, name: "淘宝买菜农场直发", address: "河南省", ifFreeDelivert: "包邮"}, {type: "食品", title: "千丝手作凤凰卷卷心酥饼干芝麻海苔鸡蛋卷网红休闲小吃零", price: 3.90, buy_len: 75, name: "淘宝买菜农场直发", address: "福建省", ifFreeDelivert: "包邮"}, {type: "食品", title: "登荣香辣爽口鸡零食辣子鸡丁爽牛肉口水鸡麻辣条重庆特产小吃荣登", price: 17.80, buy_len: 10000, name: "蝶羽食品专营店", address: "重庆", ifFreeDelivert: "包邮"} ]; // 计算统计数据 function calculateStats() { const totalProducts = products.length; const totalPrice = products.reduce((sum, product) => sum + product.price, 0); const avgPrice = (totalPrice / totalProducts).toFixed(2); const totalSales = products.reduce((sum, product) => sum + product.buy_len, 0); const freeDeliveryCount = products.filter(product => product.ifFreeDelivert === "包邮").length; const freeDeliveryPercent = ((freeDeliveryCount / totalProducts) * 100).toFixed(1); document.getElementById('total-products').textContent = totalProducts; document.getElementById('avg-price').textContent = `¥${avgPrice}`; document.getElementById('total-sales').textContent = totalSales.toLocaleString(); document.getElementById('free-delivery').textContent = `${freeDeliveryPercent}%`; } // 价格分布图表 function renderPriceDistributionChart() { const priceRanges = [ { label: "0-5元", min: 0, max: 5 }, { label: "5-10元", min: 5, max: 10 }, { label: "10-20元", min: 10, max: 20 }, { label: "20-50元", min: 20, max: 50 }, { label: "50元以上", min: 50, max: Infinity } ]; const counts = priceRanges.map(range => { return products.filter(product => product.price >= range.min && product.price < range.max).length; }); const labels = priceRanges.map(range => range.label); const ctx = document.getElementById('priceDistributionChart').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: '商品数量', data: counts, backgroundColor: [ 'rgba(54, 162, 235, 0.7)', 'rgba(75, 192, 192, 0.7)', 'rgba(255, 206, 86, 0.7)', 'rgba(255, 159, 64, 0.7)', 'rgba(153, 102, 255, 0.7)' ], borderColor: [ 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255, 159, 64, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { return `商品数量: ${context.raw}`; } } } }, scales: { y: { beginAtZero: true, title: { display: true, text: '商品数量' } }, x: { title: { display: true, text: '价格区间' } } } } }); } // 价格与销量关系图表 function renderPriceSalesChart() { const prices = products.map(product => product.price); const sales = products.map(product => product.buy_len); const ctx = document.getElementById('priceSalesChart').getContext('2d'); new Chart(ctx, { type: 'scatter', data: { datasets: [{ label: '价格与销量关系', data: products.map(product => ({ x: product.price, y: product.buy_len })), backgroundColor: 'rgba(75, 192, 192, 0.7)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1, pointRadius: 6, pointHoverRadius: 8 }] }, options: { responsive: true, plugins: { tooltip: { callbacks: { label: function(context) { const product = products[context.dataIndex]; return [ `商品: ${product.title.substring(0, 20)}...`, `价格: ¥${product.price}`, `销量: ${product.buy_len}` ]; } } } }, scales: { y: { title: { display: true, text: '销量' } }, x: { title: { display: true, text: '价格(元)' } } } } }); } // 销量TOP10商品图表 function renderTopSalesChart() { // 按销量降序排序 const sortedProducts = [...products].sort((a, b) => b.buy_len - a.buy_len); const top10 = sortedProducts.slice(0, 10); const chartDom = document.getElementById('topSalesChart'); const myChart = echarts.init(chartDom); const option = { title: { text: '销量TOP10商品', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function(params) { const product = top10[params[0].dataIndex]; return ` <div style="font-weight:bold">${product.title.substring(0, 20)}...</div> <div>价格: ¥${product.price}</div> <div>销量: ${product.buy_len}</div> <div>地区: ${product.address}</div> `; } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', name: '销量', axisLabel: { formatter: '{value}' } }, yAxis: { type: 'category', data: top10.map(product => product.title.substring(0, 15) + '...'), axisLabel: { interval: 0, rotate: 0 } }, series: [ { name: '销量', type: 'bar', data: top10.map(product => product.buy_len), itemStyle: { color: function(params) { const colorList = [ '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570' ]; return colorList[params.dataIndex]; } }, label: { show: true, position: 'right', formatter: '{c}' } } ] }; myChart.setOption(option); // 响应式调整 window.addEventListener('resize', function() { myChart.resize(); }); } // 销量分布图表 function renderSalesDistributionChart() { const salesRanges = [ { label: "0-100", min: 0, max: 100 }, { label: "100-1000", min: 100, max: 1000 }, { label: "1000-5000", min: 1000, max: 5000 }, { label: "5000-10000", min: 5000, max: 10000 }, { label: "10000+", min: 10000, max: Infinity } ]; const counts = salesRanges.map(range => { return products.filter(product => product.buy_len >= range.min && product.buy_len < range.max).length; }); const labels = salesRanges.map(range => range.label); const ctx = document.getElementById('salesDistributionChart').getContext('2d'); new Chart(ctx, { type: 'pie', data: { labels: labels, datasets: [{ data: counts, backgroundColor: [ 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)', 'rgba(255, 206, 86, 0.7)', 'rgba(75, 192, 192, 0.7)', 'rgba(153, 102, 255, 0.7)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { position: 'right', }, tooltip: { callbacks: { label: function(context) { const label = context.label || ''; const value = context.raw || 0; const total = context.dataset.data.reduce((a, b) => a + b, 0); const percentage = Math.round((value / total) * 100); return `${label}: ${value} (${percentage}%)`; } } } } } }); } // 地区分布图表 function renderRegionChart() { const regionCounts = {}; products.forEach(product => { const region = product.address; regionCounts[region] = (regionCounts[region] || 0) + 1; }); const regions = Object.keys(regionCounts); const counts = Object.values(regionCounts); // 按数量降序排序 const sortedRegions = regions.map((region, index) => ({ region, count: counts[index] })).sort((a, b) => b.count - a.count); const chartDom = document.getElementById('regionChart'); const myChart = echarts.init(chartDom); const option = { title: { text: '商品来源地区分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: sortedRegions.map(item => item.region) }, series: [ { name: '地区分布', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } }, labelLine: { show: false }, data: sortedRegions.map(item => ({ value: item.count, name: item.region })) } ] }; myChart.setOption(option); // 响应式调整 window.addEventListener('resize', function() { myChart.resize(); }); } // 渲染商品表格 function renderProductTable() { const tableBody = document.getElementById('productTableBody'); // 按销量降序排序 const sortedProducts = [...products].sort((a, b) => b.buy_len - a.buy_len); // 只显示前50条数据 const displayProducts = sortedProducts.slice(0, 50); displayProducts.forEach(product => { const row = document.createElement('tr'); // 缩短标题长度 const shortTitle = product.title.length > 30 ? product.title.substring(0, 30) + '...' : product.title; row.innerHTML = ` <td title="${product.title}">${shortTitle}</td> <td>¥${product.price.toFixed(2)}</td> <td>${product.buy_len.toLocaleString()}</td> <td>${product.address}</td> <td>${product.ifFreeDelivert}</td> `; tableBody.appendChild(row); }); } // 初始化所有图表和表格 function initVisualizations() { calculateStats(); renderPriceDistributionChart(); renderPriceSalesChart(); renderTopSalesChart(); renderSalesDistributionChart(); renderRegionChart(); renderProductTable(); } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', initVisualizations); </script> </body> </html>
浙公网安备 33010602011771号