Echarts数据可视化大屏开发如何优雅清晰的进行代码注释

在echarts前端开发中，主要牵涉到html、js、css三种文件类型，其注释分为单行注释和多行注释。最大的感悟在于：代码的优雅就是注释格式的统一。

• 单行注释格式

<!--这是单行注释-->

• 多行注释格式

<!--
    这是多行注释
    这是多行注释
    这是多行注释
-->

一、版权注释格式

<!--
@author Poleng
@email 30930572@qq.com
@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!