HTML+CSS+JS数据可视化大屏平台模板实例6-销售分析

共15个文件

png：8个

js：4个

html：1个

版权申诉

数据可视化大屏

5星 · 超过95%的资源 191 浏览量 2022-03-25 08:29:40 上传评论 1 收藏 560KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML+CSS+JS数据可视化大屏平台模板实例6-销售分析.rar （15个子文件）

HTML+CSS+JS数据可视化大屏平台模板实例6-销售分析

HTML+CSS+JS数据可视化大屏平台模板实例6-销售分析.JPG 265KB

Document_files

s2.png 2KB

s3.png 2KB

jquery-1.11.0.min.js 94KB

shoe.png 1KB

up.png 215B

clothes.png 535B

echarts-liquidfill.min.js 122KB

down.png 216B

main.js 17KB

echarts.min.js 730KB

mz.png 668B

s1.png 2KB

style.css 64KB

Document.html 12KB

<!DOCTYPE html>  <html lang="en" style="font-size: 16px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./Document_files/style.css"> <style type="text/css"></style></head> <body>  <header> <h1><span>数据可视化页面设计</span></h1> <p><span>Data visualization page design</span></p> </header>  <div class="main">  <div class="top5"> <div class="top5-title"> <span>品牌销售TOP5</span> </div> <div class="top5-content"> <ul> <li> <div class="cicle" style="background: url("./images/green.png") center center / 100% no-repeat;"></div> <div class="li-content" style="background: url("./images/border.png") center center / contain no-repeat;"> <span>××品牌</span> <span>15862</span> <span>82%</span> <span><img src="./Document_files/up.png" alt=""></span> </div> </li> <li> <div class="cicle" style="background: url("./images/green.png") center center / 100% no-repeat;"></div> <div class="li-content" style="background: url("./images/border.png") center center / contain no-repeat;"> <span>××品牌</span> <span>15862</span> <span>82%</span> <span><img src="./Document_files/up.png" alt=""></span> </div> </li> <li> <div class="cicle" style="background: url("./images/green.png") center center / 100% no-repeat;"></div> <div class="li-content" style="background: url("./images/border.png") center center / contain no-repeat;"> <span>××品牌</span> <span>15862</span> <span>82%</span> <span><img src="./Document_files/up.png" alt=""></span> </div> </li> <li> <div class="cicle" style="background: url("./images/orange.png") center center / 100% no-repeat;"></div> <div class="li-content" style="background: url("./images/border2.png") center center / contain no-repeat;"> <span>××品牌</span> <span>15862</span> <span>82%</span> <span><img src="./Document_files/up.png" alt=""></span> </div> </li> <li> <div class="cicle" style="background: url("./images/green.png") center center / 100% no-repeat;"></div> <div class="li-content" style="background: url("./images/border.png") center center / contain no-repeat;"> <span>××品牌</span> <span>15862</span> <span>82%</span> <span><img src="./Document_files/down.png" alt=""></span> </div> </li> </ul> </div> <div class="top5-title"> <span>大类销售分析</span> </div> </div>  <div class="total"> <div class="data1"> <span>年销售</span> <p>5684710411</p> </div> <div class="data2"> <span>月销售</span> <p>1457104</p> </div> <div class="data3"> <span>周销售</span> <p>564710</p> </div> <div class="data4"> <span>日销售</span> <p>14504</p> </div> <canvas class="rain" width="791" height="429"></canvas> <canvas class="dashed" width="791" height="286"></canvas> <div class="sphere"> <div class="sphere-bg"></div> <div class="sum"> <span>销售总额</span> <p>568971401</p> </div> </div> <div class="cicle3"></div> <div class="cicle4"></div> <div class="cicle5"></div> <div class="cicle6"></div> <div class="cicle7"></div> <div class="cicle8"> <span>89%</span> <p>同比</p> </div> <div class="cicle9"> <span>89%</span> <p>完成率</p> </div> <div class="cicle10"> <span>89%</span> <p>售罄率</p> </div> <div class="cicle11"> <span>89%</span> <p>折扣率</p> </div> </div>  <div class="analyse"> <div class="analyse-title"> <span>会销情况分析</span> </div> <ul> <li> <img src="./Document_files/s1.png" alt=""> <h5>会销目标</h5><br> <span>Marketing Target</span><br> <em>￥4,374,266</em> </li> <li> <img src="./Document_files/s3.png" alt=""> <h5>会销目标</h5><br> <span>Marketing Target</span><br> <em>￥4,374,266</em> </li> <li> <img src="./Document_files/s2.png" alt=""> <h5>会销目标</h5><br> <span>Marketing Target</span><br> <em>￥4,374,266</em> </li> </ul> <div class="execution"> <div class="title">完成情况</div> <div class="cicle1"></div> <div class="cicle2"></div> <div class="waterChart1"> <div class="chart-title">会销完成率</div> <div class="chart1" _echarts_instance_="ec_1648167630094" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 64px; height: 64px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="96" height="96" style="position: absolute; left: 0px; top: 0px; width: 64px; height: 64px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div> </div> <div class="waterChart2"> <div class="chart-title">会销占比</div> <div class="chart2" _echarts_instance_="ec_1648167630095" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 64px; height: 64px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="96" height="96" style="position: absolute; left: 0px; top: 0px; width: 64px; height: 64px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin

评论收藏

内容反馈

版权申诉