一、 确定需求方案
 按照一般的电脑显示屏1920*1080分辨率开发,浏览器缩放,布局不会乱窜

跟部门领导沟通确定业务核心指标和各种维度的数据分析, 再确认数据来源

二、技术选型 
前端基于前端开源图表库设计,使用Visual Studio Code编辑器;
     2.后端使用Python Flask 实现  

     3.数据传输格式,Ajax异步请求:JSON;

部分关键HTML

<div class="topLabel">
        <ul>
            <li>
                <div>
                    <span>销售额</span>
                    <span>2289万</span>
                </div>
                <div>
                    <span>环比增长 2900</span>
                    <span>环比增长率 20%</span>
                </div>
            </li>
            <li>
                <div>
                    <span>毛利</span>
                    <span>89万</span>
                </div>
                <div>
                    <span>环比增长 20</span>
                    <span>环比增长率 12%</span>
                </div>
            </li>
            <li>
                <div>
                    <span>毛利率</span>
                    <span>65%</span>
                </div>
                <div>
                    <span>环比增长 5%</span>
                    <span>环比增长率 3%</span>
                </div>
            </li>
            <li>
                <div>
                    <span>转化率</span>
                    <span>20%</span>
                </div>
                <div>
                    <span>环比增长 8%</span>
                    <span>环比增长率 20%</span>
                </div>
            </li>
            <li>
                <div>
                    <span>客户数</span>
                    <span>466</span>
                </div>
                <div>
                    <span>环比增长 23</span>
                    <span>环比增长率 35%</span>
                </div>
            </li>
            <li>
                <div>
                    <span>线上客户</span>
                    <span>89</span>
                </div>
                <div>
                    <span>环比增长 11</span>
                    <span>环比增长率 20%</span>
                </div>
            </li>
            <li>
                <div>
                    <span>线下客户</span>
                    <span>355</span>
                </div>
                <div>
                    <span>环比增长 33</span>
                    <span>环比增长率 10%</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="middle">
        <div class="middle_one">
            <canvas id="funnel_ID" class="funnel_ID_class"></canvas>
        </div>
        <div class="middle_two">
            <canvas id="target_ID" class="target_ID_class"></canvas>
        </div>
        <div class="middle_three">
            <canvas id="Mountainpeakmap_ID" class="Mountainpeakmap_ID_class"></canvas>
        </div>
    </div>
    <div class="middle">
        <div class="middle_one">
            <canvas id="CiYunTu_ID" class="CiYunTu_ID_class"></canvas>
        </div>
        <div class="middle_two">
            <canvas id="BubbleChartID" class="BubbleChartID_class"></canvas>
        </div>
        <div class="middle_three">
            <canvas id="BarChartID" class="BarChartID_class"></canvas>
        </div>
    </div>

Logo

永洪科技,致力于打造全球领先的数据技术厂商,具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐