master

分支 (1)

管理

管理

master

echarts-data-visualization
/
logistics-market.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流大数据展示平台</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.js"></script>
    <script src="./js/jquery-3.7.1.js"></script>
</head>

<body>
    <div class="fener">目前我们企业市场份额排名第6，距离第五名还差5%的市场份额</div>
    <div class="header">
        <div class="header-left" id="time"></div>
        <div class="header-right">物流大数据分析平台欢迎您！</div>
        <div class="sysName">
            <h1 class="tit">物流大数据分析平台</h1>
            <div class="header-img"></div>
        </div>
        <div class="menu">
            <ul>
                <li><a href="./index.html">总数据</a></li>
                <li><a href="./logistics-operation.html">物流运营综合分析</a></li>
                <li class="sysnameN"></li>
                <li><a href="./logistics-market.html" class="menuActive">物流市场分析</a></li>
                <li><a href="./logistics-order.html">物流订单分析</a></li>
            </ul>
        </div>
        <div class="header-bottom"></div>
    </div>
    <div class="chartWarp inventoryWarp" id="order-box">
        <div class="pure-g int-row1">
            <div class="pure-u-1-3">
                <div class="chartBlock h55">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">物流行业创新趋势</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="marketQs" class="chartDiv"></div>
                    </div>
                </div>
                <div class="chartBlock h45">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">物流企业TOP5市场份额</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="competitionFen" class="chartDiv"></div>
                    </div>
                </div>
            </div>
            <div class="pure-u-1-3">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">自身市场优势</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="marketYs" class="chartDiv"></div>
                    </div>
                </div>
            </div>
            <div class="pure-u-1-3">
                <div class="chartBlock h55">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">电商与实体店周物流量对比</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="e-commerce" class="chartDiv"></div>
                    </div>
                </div>
                <div class="chartBlock h45">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">不同年龄段快递消费群体</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <select name="selectColor" id="selectColor">
                            <option value="#F06292" class="selected">默认</option>
                            <option value="#009DFF">蓝色主题</option>
                            <option value="#06D6A0">绿色主题</option>
                            <option value="#D86EDB">紫色主题</option>
                        </select>
                        <div id="consumerGroup" class="chartDiv"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function getCurrentDateTime() {
            const now = new Date()
            const year = now.getFullYear()
            const month = String(now.getMonth() + 1).padStart(2, '0')
            const day = String(now.getDate()).padStart(2, '0')
            const hours = String(now.getHours()).padStart(2, '0')
            const minutes = String(now.getMinutes()).padStart(2, '0')
            const seconds = String(now.getSeconds()).padStart(2, '0')
            const weekday = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(now);
            return `${year}-${month}-${day}&nbsp;&nbsp;${hours}:${minutes}:${seconds}&nbsp;&nbsp;<span>${weekday}</span>`;
        }
        document.getElementById('time').innerHTML = getCurrentDateTime()
        setInterval(() => {
            document.getElementById('time').innerHTML = getCurrentDateTime()
        }, 1000)

        $('.fener').fadeIn()
        setTimeout(() => {
            $('.fener').fadeOut()
        }, 3000);
    </script>

    <script src="./js/logistics-market.js"></script>

</body>

</html>