Echarts數據可視化大屏開發如何優雅清晰的進行代碼註釋

在echarts前端開發中，主要牽涉到html、js、css三種文件類型，其註釋分爲單行註釋和多行註釋。最大的感悟在於：代碼的優雅就是註釋格式的統一。

• 單行註釋格式

<!--這是單行註釋-->

• 多行註釋格式

<!--
    這是多行註釋
    這是多行註釋
    這是多行註釋
-->

一、版權註釋格式

<!--
@author Poleng
@email [e-mail]
@create date 2020-07-18 08:42:38
@modify date 2020-03-20 15:17:15
@desc A data visualization project based on echarts4.0.js. 
-->

二、head引入外部文件註釋

    <!--核心圖表視覺庫-->
    <script type="text/javascript" src="js/visual_performance.js"></script>
    <!--KPI指標滾動數字翻牌器-->
    <script type="text/javascript" src="js/totalnum.js"></script>
    <!--核心樣式表-->
    <link rel="stylesheet" href="css/common.css">

三、body指標代碼分區註釋

<!--加載動畫-->
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif">Loading...</div>
</div>

<!--頭部標題-->
<div class="head">
    <img src="images/performance.png" alt="經營業績">
</div>

<!--版權角標-->
<div id="datav-text-logo">漏刻有時</div>

 <!--KPI指標-->
                <div class="numNorm">
                    <div class="numbt">2019年營業收入</div>
                    <div class="numberRun"></div>
                </div>
                <!--柱圖-->
                <div id="midBar" style="height: 150px;"></div>

                <!--同比增長-->
                <div class="midTitle">同比增長</div>
                <div class="dataTile">
                    <span>70%</span><span>15%</span><span>-1.46%</span><span>6.2%</span><span>5.3%</span></div>
                <div id="midRate" style="height: 150px;"></div>

                <!--損益簡表-->
                <div class="midTitle">損益簡表</div>

四、HTML執行javascript註釋

    //隱藏加載動畫;
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    //年營業收入；
    function todayDeal() {
        var numRun = $(".numberRun").numberAnimate({num: '3053242.10', dot: 2, speed: 2000, symbol: ","});
        var nums = 3053242.10;
        setInterval(function () {
            nums += parseFloat((Math.random() * 152 + 5).toFixed(2) - 0);//隨機累加3位數，或則直接填寫數字，如18.88；
            numRun.resetData(nums);
        }, 3000);//3000毫秒=3秒;
    }

    todayDeal();

    //加載核心圖表;
    $(function () {
        getCostData();
        getWagesData();
        getMidBarData();
        getMidRateData();
        getEfficiencyData();
    });

Done!