在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!
