数据可视化面板(接口地址删了)

又奶又输出
121 阅读1分钟

共享租机平台数据看板 
<div class="title">
    <span>共享租机平台数据看板</span>
</div>

<div class="main">
    <!-- 包含地图左边 -->
    <div class="main_Left">
        <!-- 顶部一行 -->
        <div class="main_left_Top">
            <div class="BoxStyle_one borderStyle main_left_margin">
                <img src="image/index_ico_data@2x.png" class="iconImg">
                <div>
                    <p class="BoxStyle_one_p1">营业总额/元</p>
                    <p class="BoxStyle_one_p2" id="TBT">0</p>
                </div>
            </div>
            <div class="BoxStyle_one borderStyle main_left_margin">
                <img src="image/index_ico_data@2x.png" class="iconImg">
                <div>
                    <p class="BoxStyle_one_p1" style="color:#48D5D5">总待收/元</p>
                    <p class="BoxStyle_one_p2" id="TBR">0</p>
                </div>
            </div>
            <div class="BoxStyle_two borderStyle main_left_margin main_left_margin">
                <p style="color:#48D5D5" id="CR">0</p>
                <p class="BoxStyle_two_p2">转化率/%</p>
            </div>
            <div class="BoxStyle_two borderStyle main_left_margin">
                <p style="color:#FF3232" id="CLR">0</p>
                <p class="BoxStyle_two_p2">取消率/%</p>
            </div>
            <div class="BoxStyle_two borderStyle main_left_margin">
                <p style="color:#CA91FF" id="CPR">0</p>
                <p class="BoxStyle_two_p2">申诉率/%</p>
            </div>
            <div class="BoxStyle_two borderStyle main_left_margin">
                <p style="color:#61F59E" id="credible">0</p>
                <p class="BoxStyle_two_p2">诚信分</p>
            </div>



        </div>
        <!-- 底部一行 -->
        <div class="main_left_Bottom">
            <div>
                <div class="BoxStyle_Bottom borderStyle">
                    <canvas id="ridu" style="width:710px;height:375px"></canvas>
                </div>
                <div class="BoxStyle_Bottom borderStyle" style="margin-top:36px">
                    <canvas id="yuedu" style="width:710px;height:375px"></canvas>
                </div>
            </div>
            <div class="mapBox">
                <div class="mapTitle">全国商户覆盖地图</div>
                <div class="mapStyle">
                    <canvas id="mapId" style="width: 1150px;height:570px;">不支持 canvas</canvas>
                </div>

                <!-- <img src="image/index_ico_map@2x.png" class="mapStyle"> -->
            </div>
        </div>
    </div>
    <!-- 地图右边 -->
    <div class="main_Right">
        <div class="main_Right_Box borderStyle">
            <p class="main_Right_P1">今日取消订单</p>
            <p class="main_Right_P2" id="todayCancel">0</p>
            <div class="main_Right_poa">
                <img src="image/index_ico_up@2x.png" class="arrowStyle" id="todayPer1">
                <img src="image/index_ico_down@2x.png" class="arrowStyle" id="todayPer2" style="display:none">
                <div>
                    <p style="font-size: 22px;"></p>相较昨日</p>
                    <p style="font-size: 24px;margin-top:13px;width:120px" id="todayPer">下降 <span
                            class="greenWords">42%</span></p>
                </div>
            </div>
        </div>
        <div class="main_Right_Box borderStyle">
            <p class="main_Right_P1">今日订单金额</p>
            <p class="main_Right_P2" id="TOM">0</p>
            <div class="main_Right_poa">
                <img src="image/index_ico_up@2x.png" class="arrowStyle" id="TOMPer1">
                <img src="image/index_ico_down@2x.png" class="arrowStyle" id="TOMPer2" style="display:none">
                <div>
                    <p style="font-size: 22px;"></p>相较昨日</p>
                    <p style="font-size: 24px;margin-top:13px;width:120px" id="TOMPer">下降 <span
                            class="greenWords">42%</span></p>
                </div>
            </div>
        </div>
        <div class="main_Right_Box borderStyle">
            <p class="main_Right_P1">目前逾期金额/元</p>
            <p class="main_Right_P2" id="TBM">0</p>
            <div class="main_Right_poa">
                <img src="image/index_ico_up@2x.png" class="arrowStyle" id="TBMPer1">
                <img src="image/index_ico_down@2x.png" class="arrowStyle" id="TBMPer2" style="display:none">
                <div>
                    <p style="font-size: 22px;"></p>相较昨日</p>
                    <p style="font-size: 24px;margin-top:13px;width:120px" id='TBMPer'>下降 <span
                            class="greenWords">42%</span></p>
                </div>
            </div>
        </div>
        <div class="main_Right_Box borderStyle">
            <p class="main_Right_P1">目前逾期订单</p>
            <p class="main_Right_P2" id="TBO">0</p>
            <div class="main_Right_poa">
                <img src="image/index_ico_up@2x.png" class="arrowStyle" id="TBOPer1">
                <img src="image/index_ico_down@2x.png" class="arrowStyle" id="TBOPer2" style="display:none">
                <div>
                    <p style="font-size: 22px;"></p>相较昨日</p>
                    <p style="font-size: 24px;margin-top:13px;width:120px" id="TBOPer">下降<span
                            class="greenWords">42%</span></p>
                </div>
            </div>
        </div>
        <div class="main_Right_Box borderStyle">
            <p class="main_Right_P1">目前逾期平均时间/天</p>
            <p class="main_Right_P2" id="TBTDay">0</p>
            <div class="main_Right_poa">
                <img src="image/index_ico_up@2x.png" class="arrowStyle" id="TBTDayPer1">
                <img src="image/index_ico_down@2x.png" class="arrowStyle" id="TBTDayPer2" style="display:none">
                <div>
                    <p style="font-size: 22px;"></p>相较昨日</p>
                    <p style="font-size: 24px;margin-top:13px;width:120px" id="TBTDayPer">下降<span
                            class="greenWords">42%</span></p>
                </div>
            </div>
        </div>
        <!-- 目前逾期平均时间 -->
        <!-- <div class="TimeBox">
            <div class="Timehead">
                <div class="blueCircle"></div>
                <p style="font-size:29px;color:#FFFFFF">目前逾期平均时间</p>
            </div>
            <div class="cricleStyle_big">
                <canvas id="cricle1" style="width:166px;height:166px"></canvas>
            </div>
            <div class="cricleStyle_small">
                <canvas id="cricle2"></canvas>
            </div>
        </div> -->
    </div>
</div>






<canvas id='myCanvas' style="width:300px;height:150px"></canvas>
avatar
文章
阅读
粉丝