grafana 中textPanel option中编写html

多处利用，单独抽取各自共用部分，别人用的时候只用修改config参数、domId、配接口即可

• 示例1，多行多列，数据展示：

<style type="text/css">
  /* 重写panel中的table样式 */
    .markdown-html #dbox table th{
        background: none;
    }
    .markdown-html #dbox table, 
    .markdown-html #dbox td,
    .markdown-html #dbox th{
        border: none;
    } 
    .markdown-html #dbox table td, 
    .markdown-html #dbox table th {
        padding: 0.3rem;
        padding-left: 0;
        padding-right: 0;
        font-size: 0.8rem;
        text-align: center;
    }
    .title-table{
        height:2rem;
        line-height:2rem;
    }
    .text-style{
        font-size: 1rem; 
        color: rgb(2, 247, 2);
    }
</style>
<!-- 设置最外城容器id -->
<div id="dbox" style="width:100%;height:80px;"></div>
<script>
// 数据源
    var dataArr = global_metric_data;
 // 表格配置
    var tableConfig = {
        // 最外层容器id
        sourceId: 'dbox',
        // 左侧 行1、行2 标题
        rowTitle1: "SHOO系统",
        rowTitle2: "基础平台",
        // 列1、2、3、4 标题
        colTitle1:"告警",
        colTitle2:"Fatal",
        colTitle3:"处理",
        colTitle4:"自动化处理率",
    }
// 将模板展示到页面上
    function setHTML(dom, html){
        return document.getElementById(dom).innerHTML = html;
    }

// 根据数据源 拼接模板html
    function returnDealWarningTemplate(data, config){
        var tempHtml = "";
        // 若未采集到数据
        if(data.length==0){
            tempHtml = "<p style='text-align: center;margin-top:20px;'>No data to show!</p>";
            setHTML(config.sourceId, tempHtml);
            return;
        }

        var row1col1Val = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';
        var row1col2Val = (data[1].valueRounded || data[1].valueRounded =='0')?data[1].valueRounded:'--';
        var row1col3Val = (data[2].valueRounded || data[2].valueRounded =='0')?data[2].valueRounded:'--';
        var row1col4Val = (data[3].valueRounded || data[3].valueRounded =='0')?data[3].valueRounded+'%':'--';

        var row2col1Val=(data[4].valueRounded || data[4].valueRounded =='0')&&(data[7].valueRounded || data[7].valueRounded =='0')?data[4].valueRounded+data[7].valueRounded:'--';
        var row2col2Val=(data[5].valueRounded || data[5].valueRounded =='0')&&(data[8].valueRounded || data[8].valueRounded =='0')?data[5].valueRounded+data[8].valueRounded:'--';
        var row2col3Val=(data[6].valueRounded || data[6].valueRounded =='0')&&(data[9].valueRounded || data[9].valueRounded =='0')?data[6].valueRounded+data[9].valueRounded:'--';
        // DD 与 DC 指标的自动化处理率 不能相加  
        // 需要DD与DC 处理数和/总处理数和
        var DDAddDCItemCount =(data[10].valueRounded || data[10].valueRounded =='0')&&(data[12].valueRounded || data[12].valueRounded =='0')?data[10].valueRounded+data[12].valueRounded:'--';
        var DDAddDCAllCount = (data[11].valueRounded || data[11].valueRounded =='0')&&(data[13].valueRounded || data[13].valueRounded =='0')?data[11].valueRounded+data[13].valueRounded:'--';;
        var row2col4Val=(DDAddDCItemCount!='--'&&DDAddDCAllCount!='--')?Math.round(DDAddDCItemCount/DDAddDCAllCount*100)+'%':'--';
      
        // 左侧模板 展示排名、击败率、击败类型
        tempHtml +=
                '<table style="width: 100%;" border="0">' +
            '<thead>' +
                '<tr style="border-bottom: 1px solid #3d3535;">' + 
                    '<th class="title-table"></th>' +
                    '<th class="title-table">'+config.colTitle1+'</th>'+
                    '<th class="title-table">'+config.colTitle2+'</th>'+
                    '<th class="title-table">'+config.colTitle3+'</th>'+
                    '<th class="title-table">'+config.colTitle4+'</th>'+
                '</tr>'+
            '</thead>'+
            '<tbody>'+
                '<tr style="border-bottom: 1px solid #3d3535;">'+
                    '<td>'+config.rowTitle1+'</td>'+
                    '<td><span class="text-style">'+row1col1Val+'</span></td>'+      
                    '<td><span class="text-style">'+row1col2Val+'</span></td>'+
                    '<td><span class="text-style">'+row1col3Val+'</span></td>'+
                    '<td><span class="text-style">'+row1col4Val+'</span></td>'+
                '</tr>'+
                '<tr>'+
                    '<td>'+config.rowTitle2+'</td>'+
                    '<td><span class="text-style">'+row2col1Val+'</span></td>'+  
                    '<td><span class="text-style">'+row2col2Val+'</span></td>'+
                    '<td><span class="text-style">'+row2col3Val+'</span></td>'+
                    '<td><span class="text-style">'+row2col4Val+'</span></td>'+
                '</tr>'+
            '</tbody>'+
        '</table>';
        setHTML(config.sourceId, tempHtml);
    }
    returnDealWarningTemplate(dataArr,tableConfig);
</script>

• 示例2: 平均响应与处理时间，包含于目标值、昨天值比较

<style type="text/css">
  /* 重写panel中的table样式 */
    .markdown-html #box table th{
        background: none;
    }
    .markdown-html #box table, 
    .markdown-html #box td,
    .markdown-html #box th{
        border: none;
    } 
    .markdown-html #box table td, 
    .markdown-html #box table th {
        padding: 0.3rem;
        padding-left:0;
        padding-right:0;
    }
    .align-left{text-align: left} 
    .align-right{text-align:right}
</style>
<!-- 设置最外城容器id -->
<div id="box" style="width:100%;margin-top:-1rem;"></div>
<script>
// 假数据源
//var global_metric_data=[{"value":1431,"flotpairs":[[1529251199000,1321],[1529337599000,1391],[1529423999000,1431],[1529510399000,1401],[1529596799000,1381],[1529683199000,1401],[1529769599000,1431],[1529855999000,1431]],"valueRounded":1431,"label":"事件平均响应时间全局排名"},{"value":48.175182,"flotpairs":[[1529251199000,44.957985],[1529337599000,42.73859],[1529423999000,42.040817],[1529510399000,44.17671],[1529596799000,45.634922],[1529683199000,46.53846],[1529769599000,46.616543],[1529855999000,48.175182]],"valueRounded":48,"label":"事件平均响应时间全局优胜率"},{"value":11.48,"flotpairs":[[1529251199000,0],[1529337599000,671.06],[1529423999000,351.58],[1529510399000,231.04],[1529596799000,291.34],[1529683199000,71.17],[1529769599000,0],[1529855999000,11.48]],"valueRounded":11.5,"label":"事件平均响应时间"},{"value":50.38,"flotpairs":[[1529251199000,9.6],[1529337599000,119.49],[1529423999000,51.17],[1529510399000,651.49],[1529596799000,421.6],[1529683199000,301.08],[1529769599000,111.21],[1529855999000,501.38]],"valueRounded":501,"label":"事件平均响应时间"},{"value":271.94,"flotpairs":[[1529251199000,331.68],[1529337599000,341.7],[1529423999000,341.75],[1529510399000,331.97],[1529596799000,331.82],[1529683199000,321.36],[1529769599000,311.04],[1529855999000,271.94]],"valueRounded":281,"label":"事件平均响应时间"},{"value":1231.75,"flotpairs":[[1529251199000,1521.2],[1529337599000,1511.29],[1529423999000,1461.92],[1529510399000,1421.85],[1529596799000,1361.57],[1529683199000,1291.54],[1529769599000,1261.57],[1529855999000,1231.75]],"valueRounded":1241,"label":"事件平均响应时间"}];
 // 数据源
    var dataArr = global_metric_data;
 // 表格配置
    var tableConfig = {
        // 最外层容器id
        sourceId: 'box',
        // 左侧标题
        leftTitle: "全局排名",
        // 超越类型：租户/应用系统
        compareType: "应用系统",
        // 列1 标题
        colName1:"列名1",
        // 列1 目标值（单位支持秒、分钟、小时、天）
        targetValue1:"2小时",
        // 列2 标题 目标值
        colName2:"列名2",
        targetValue2:"4小时",
        // 与目标值比较类型 lt表示越小越好，当天值/当月值显示绿色； gt表示越大越好
        sortType: 'lt'
    }
 // 单位转换 将分钟转换成秒、分钟、小时、天
    function unitConversion(value){
        if(!value && value !='0'){
            return '--';
        }else{
            if(value >= 60){
                if(value%60 =='0'){
                    var num = value/60;
                    if(num >= 24){
                        var day = num/24;
                        if(num%24 =='0'){
                            return day +'天';
                        }else{
                            var ss = day.toFixed(1);
                            if(ss[ss.length-1]==0){
                                ss = Math.ceil(ss);
                            }
                            return ss +'天';
                        }
                    }else{
                        return num +"小时";
                    }
                }else{
                    var num2 = (value/60).toFixed(1);
                    if(num2 >= 24){
                        var day = num2/24;
                        var sd = day.toFixed(1);
                        if(sd[sd.length-1]==0){
                            sd = Math.ceil(sd);
                        }
                        return sd +'天';
                    }else{
                        if(num2[num2.length-1]==0){
                            num2 = Math.ceil(num2);
                        }
                        return num2 +"小时";
                    }
                }
            }else if(0<value && value<1){
                return Math.ceil(value*60) +"秒";
            }else{
                return value +"分钟";
            }
        }
    }
    // 将模板展示到页面上
    function setHTML(dom, html){
        return document.getElementById(dom).innerHTML = html;
    }
    // 设置当天值与目标值比较后的状态
    function setCompareTargetStatus(rootTodayVal, todayVal, targetVal, sortType){
        // 将目标值转换成分钟
        if(targetVal.indexOf("秒")!='-1'){
            targetVal = parseFloat(targetVal)/60;
        }else if(targetVal.indexOf("分钟")!='-1'){
            targetVal = parseFloat(targetVal);
        }else if(targetVal.indexOf("小时")!='-1'){
            targetVal = parseFloat(targetVal)*60;
        }else if(targetVal.indexOf("天")!='-1'){
            targetVal = parseFloat(targetVal)*60*24;
        }else{
            alert("tableConfig配置中目标值的单位必须为秒或分钟或小时或天!");
            return;
        }

        if(rootTodayVal > targetVal){
            if(sortType == 'lt'){
               return '<td class="align-right" style="color:rgb(247, 90, 7)">'+todayVal+'</td>';
            }else{
                return '<td class="align-right" style="color:rgb(2, 247, 2)">'+todayVal+'</td>';
            }
        }else if(rootTodayVal == targetVal){
            return '<td class="align-right" style="color:#64b0c8">'+todayVal+'</td>';
        }else{
            if(sortType == 'lt'){
                return '<td class="align-right" style="color:rgb(2, 247, 2)">'+todayVal+'</td>';
            }else{
                return '<td class="align-right" style="color:rgb(247, 90, 7)">'+todayVal+'</td>';
            }
        }
    }
    // 设置当天值与昨天值 是上升还是下降状态
    function setCompareYesterdayStatus(todayVal, yesterdayVal){
        //if(todayVal == undefined || todayVal == null || todayVal ==''||yesterdayVal == undefined || yesterdayVal == null || yesterdayVal ==''){
        //    return '<td class="align-left" ></td>';
        //}
        if((todayVal || todayVal==0)&&(yesterdayVal || yesterdayVal==0)){
            if(todayVal > yesterdayVal){
                return '<td class="align-left" ><img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-5px;"></td>';
            }else if(todayVal == yesterdayVal){
                return '<td class="align-left" ></td>';
            }else{
                return '<td class="align-left" ><img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-down.png" style="height:15px;margin-top:-5px;"></td>';
            }
        }else{
            return '<td class="align-left" ></td>';
        }
    }

    // 根据数据源 拼接模板html
    function returnTemplate(data, config){
        var tempHtml = "";
        // 若未采集到数据
        if(data.length==0){
            tempHtml = "<p style='text-align: center;margin-top:20px;'>No data to show!</p>";
            setHTML(config.sourceId, tempHtml);
            return;
        }
        // 全局排名
        var leftPM = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';
        // 击败率
        var leftJBL = (data[1].valueRounded || data[1].valueRounded =='0')?data[1].valueRounded+'%':'--';
        // 列1 当天今天、昨天值
        var rootTodayCol1 = data[2].valueRounded;
        var todayCol1 = unitConversion(data[2].valueRounded);
        var todayVal1 = data[2].flotpairs[data[2].flotpairs.length-1][1];
        var yesterdayVal1 = data[2].flotpairs[data[2].flotpairs.length-2]?data[2].flotpairs[data[2].flotpairs.length-2][1]:'undefined';
        // 列2 当天今天、昨天值
        var rootTodayCol11 = data[3].valueRounded;
        var todayCol11 = unitConversion(data[3].valueRounded);
        var todayVal11 = data[3].flotpairs[data[3].flotpairs.length-1][1];
        var yesterdayVal11 = data[3].flotpairs[data[3].flotpairs.length-2]?data[3].flotpairs[data[3].flotpairs.length-2][1]:'undefined';
        // 列1 当月今天、昨天值
        var rootTodayCol2 = data[4].valueRounded;
        var todayCol2 = unitConversion(data[4].valueRounded);
        var todayVal2 = data[4].flotpairs[data[4].flotpairs.length-1][1];
        var yesterdayVal2 = data[4].flotpairs[data[4].flotpairs.length-2]?data[4].flotpairs[data[4].flotpairs.length-2][1]:'undefined';
        // 列2 当月今天、昨天值
        var rootTodayCol22 = data[5].valueRounded;
        var todayCol22 = unitConversion(data[5].valueRounded);
        var todayVal22 = data[5].flotpairs[data[5].flotpairs.length-1][1];
        var yesterdayVal22 = data[5].flotpairs[data[5].flotpairs.length-2]?data[5].flotpairs[data[5].flotpairs.length-2][1]:'undefined';
        // 左侧模板 展示排名、击败率、击败类型
        tempHtml +=
         '<div style="float:left;width:29%;text-align: center;">'+
           '<h3 style="font-size: 0.95rem;margin-bottom:8px;margin-top:0.5rem;">'+config.leftTitle+'</h3>'+
            '<div style="width: 100%;">'+
                '<img src="https://view.baocloud.cn:7090/bsview/upload-image/yinzhang.png"  style="width: 2.3rem;opacity: 0.6;position:relative;left:-0.2rem;top:0.3rem;">'+
                '<h3 style="display: inline-block;font-weight:bolder;font-size:1.9rem;margin-bottom:0.8rem;margin-top:0.4rem;position:relative;left:-1.2rem;color: #64b0c8;">'+leftPM+'</h3>'+
                '<p style="font-size: 0.9rem;margin-bottom: 0;margin-top:-0.3rem;">超越<span style="color: #64b0c8;">'+leftJBL+'</span></p>'+
                '<p style="font-size: 0.9rem;">'+config.compareType+'</p>'+
            '</div>'+
         '</div>';
         // 右侧模板 展示列1、列2 目标值、当天值、当月值，与目标值比较、与昨天数据比较
        tempHtml +=
        '<div style="float:left;width:71%;text-align: center;">'+
            '<table style="width: 100%;" border="0">' +
                '<thead>' +
                    '<tr>' +
                        '<th style="width:22%;"></th>';
                        if(config.colName1.length>3){
                           tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:12px;">'+config.colName1+'</span></th>';
                        }else{
                            tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:-2px;">'+config.colName1+'</span></th>';
                        }
                    tempHtml +='<th></th>';
                        if(config.colName2.length>3){
                           tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:12px;">'+config.colName2+'</span></th>';
                        }else{
                            tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:-2px;">'+config.colName2+'</span></th>';
                        }
                        // '<th class="align-right"><span style="margin-right:-2px;font-size:0.95rem;">'+config.colName2+'</span></th>' +
                    tempHtml +='<th></th>' +
                    '</tr>' +
                '</thead>' +
                '<tbody>' +
                    '<tr style="border-bottom: 1px solid #3d3535;">' +
                        '<td style="font-size:0.95rem;">目标值</td>' +
                        '<td style="color: #64b0c8;" class="align-right">'+config.targetValue1+'</td>' +
                        '<td></td>' +
                        '<td style="color: #64b0c8;" class="align-right">'+config.targetValue2+'</td>' +
                        '<td></td>' +
                    '</tr>' +
                    '<tr style="border-bottom: 1px solid #3d3535;">' +
                        '<td style="font-size:0.95rem;">当天</td>' +
                        setCompareTargetStatus(rootTodayCol1, todayCol1, config.targetValue1, config.sortType) +
                         setCompareYesterdayStatus(todayVal1, yesterdayVal1)+
                        setCompareTargetStatus(rootTodayCol11, todayCol11, config.targetValue2, config.sortType) +
                        setCompareYesterdayStatus(todayVal11, yesterdayVal11)+
                    '</tr>' +
                    '<tr>' +
                        '<td style="font-size:0.95rem;">当月</td>' +
                         setCompareTargetStatus(rootTodayCol2, todayCol2, config.targetValue1, config.sortType) +
                         setCompareYesterdayStatus(todayVal2, yesterdayVal2)+
                         setCompareTargetStatus(rootTodayCol22, todayCol22, config.targetValue2, config.sortType) +
                         setCompareYesterdayStatus(rootTodayCol22, todayVal22, yesterdayVal22)+
                    '</tr>' +
                '</tbody>' +
           '</table>' +
        '</div>';
        setHTML(config.sourceId, tempHtml);
    }
    returnTemplate(dataArr,tableConfig);
</script>

• 示例3: 处理率table，包含于目标值、昨天值比较

<style type="text/css">
  /* 重写panel中的table样式 */
    .markdown-html #tbox table th{
        background: none;
    }
    .markdown-html #tbox table, 
    .markdown-html #tbox td,
    .markdown-html #tbox th{
        border: none;
    } 
    .markdown-html #tbox table td, 
    .markdown-html #tbox table th {
        padding: 0.3rem;
        padding-left:0;
        padding-right:0;
    }
    .align-left{text-align: left} 
    .align-right{text-align:right}
</style>
<!-- 设置最外城容器id -->
<div id="tbox" style="width:100%;margin-top:-1rem;"></div>
<script>
// var global_metric_data=[{"value":9,"flotpairs":[[1526874214000,null],[1526877007000,3],[1526878081000,3],[1526892150000,3],[1526923800000,null],[1526978736000,9],[1527010200000,9]],"valueRounded":9,"label":"故障自动化处理率全局排名"},{"value":92.45283,"flotpairs":[[1526874214000,null],[1526877007000,101.72414],[1526878081000,96.55173],[1526892150000,97.4359],[1526923800000,null],[1526978736000,89.189186],[1527010200000,92.45283]],"valueRounded":92,"label":"故障自动化处理率全局优胜率"},{"value":14.285714,"flotpairs":[[1526874214000,66.666664],[1526877007000,66.666664],[1526878081000,66.666664],[1526892150000,62.5],[1526923800000,null],[1526978736000,10],[1527010200000,14.285714]],"valueRounded":14,"label":"监控自动处理告警比例"},{"value":15.824916,"flotpairs":[[1526874214000,13.793103],[1526877007000,14.615385],[1526878081000,14.615385],[1526892151000,12.57485],[1526923800000,50],[1526978736000,19.897959],[1527010200000,15.824916]],"valueRounded":16,"label":"监控自动处理告警比例"},{"value":32.394367,"flotpairs":[[1526893195000,44.604317],[1526893264000,44.604317],[1526894194000,44.604317],[1526923511000,33.668343],[1527009913000,32.394367]],"valueRounded":32,"label":"监控自动处理告警比例"},{"value":18.614405,"flotpairs":[[1526893194000,23.609756],[1526893263000,23.609756],[1526894193000,23.609756],[1526923510000,18.790726],[1527009912000,18.614405]],"valueRounded":19,"label":"监控自动处理告警比例"}];
// 数据源
    var dataArr = global_metric_data;
 // 表格配置
    var tableConfig = {
        // 最外层容器id
        sourceId: 'tbox',
        // 左侧标题
        leftTitle: "全局排名",
        // 超越类型：租户/应用系统
        compareType: "应用系统",
        // 列1 标题
        colName1:"云管理平台",
        // 列1 目标值（单位支持%）
        targetRate1:"50%",
        // 列2 标题 目标值
        colName2:"宝之云",
        targetRate2:"20%",
        // 与目标值比较类型 lt表示越小越好，当天值/当月值显示绿色； 默认为gt，表示越大越好；
        sortType: 'gt'
    }
// 将模板展示到页面上
    function setHTML(dom, html){
        return document.getElementById(dom).innerHTML = html;
    }
// 设置当天值与目标值与昨天值比较后的状态
    function setCompareTargetAndYesterdayRateStatus(rootTodayVal,rootYesterdayVal, todayVal, targetVal, sortType){
        // 将目标值 去掉单位%
        targetVal = parseFloat(targetVal);
        var compareTodayVal = parseFloat(todayVal);
        var statusHtml = "";

        if(compareTodayVal > targetVal){
            if(sortType == 'lt'){
               statusHtml = '<td><span style="margin-left:15px;color:rgb(247, 90, 7);">'+todayVal+'</span>';
            }else{
                statusHtml = '<td><span style="margin-left:15px;color:rgb(2, 247, 2);">'+todayVal+'</span>';
            }
        }else if(compareTodayVal == targetVal){
            statusHtml = '<td><span style="margin-left:15px;color:#64b0c8;">'+todayVal+'</span>';
        }else{
            if(sortType == 'lt'){
                 statusHtml = '<td><span style="margin-left:15px;color:rgb(2, 247, 2);">'+todayVal+'</span>';
            }else{
                 statusHtml = '<td><span style="margin-left:15px;color:rgb(247, 90, 7);">'+todayVal+'</span>';
            }
        }
       // 显示与昨日数据比较 上升或者下降  相等不显示  若数据有问题为null、undefined、“” 也不显示
       if((rootTodayVal || rootTodayVal==0)&&(rootYesterdayVal || rootYesterdayVal==0)){
            if(rootTodayVal > rootYesterdayVal){
                 statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-8px;"></td>';
            }else if(rootTodayVal == rootYesterdayVal){
                 statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-8px;visibility:hidden;"></td>';
            }else{
                 statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-down.png" style="height:15px;margin-top:-8px;"></td>';
            }
        }else{
            statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-8px;visibility:hidden;"></td>';
        }
        return statusHtml;
    }
// 根据数据源 拼接模板html
    function returnRateTemplate(data, config){
        var tempHtml = "";
        // 若未采集到数据
        if(data.length==0){
            tempHtml = "<p style='text-align: center;margin-top:20px;'>No data to show!</p>";
            setHTML(config.sourceId, tempHtml);
            return;
        }
        // 全局排名
        var leftPM = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';
        // 击败率
        var leftJBL = (data[1].valueRounded || data[1].valueRounded =='0')?data[1].valueRounded+'%':'--';
        // 列1 当天今天、昨天值
        var rootTodayCol1 = (data[2].valueRounded || data[2].valueRounded =='0')?data[2].valueRounded+'%':'--';
        var todayVal1 = data[2].flotpairs[data[2].flotpairs.length-1][1];
        var yesterdayVal1 = data[2].flotpairs[data[2].flotpairs.length-2]?data[2].flotpairs[data[2].flotpairs.length-2][1]:'undefined';
        // 列2 当天今天、昨天值
        var rootTodayCol11 = (data[3].valueRounded || data[3].valueRounded =='0')?data[3].valueRounded+'%':'--';
        var todayVal11 = data[3].flotpairs[data[3].flotpairs.length-1][1];
        var yesterdayVal11 = data[3].flotpairs[data[3].flotpairs.length-2]?data[3].flotpairs[data[3].flotpairs.length-2][1]:'undefined';
        // 列1 当月今天、昨天值
        var rootTodayCol2 = (data[4].valueRounded || data[4].valueRounded =='0')?data[4].valueRounded+'%':'--';
        var todayVal2 = data[4].flotpairs[data[4].flotpairs.length-1][1];
        var yesterdayVal2 = data[4].flotpairs[data[4].flotpairs.length-2]?data[4].flotpairs[data[4].flotpairs.length-2][1]:'undefined';
        // 列2 当月今天、昨天值
        var rootTodayCol22 = (data[5].valueRounded || data[5].valueRounded =='0')?data[5].valueRounded+'%':'--';
        var todayVal22 = data[5].flotpairs[data[5].flotpairs.length-1][1];
        var yesterdayVal22 = data[5].flotpairs[data[5].flotpairs.length-2]?data[5].flotpairs[data[5].flotpairs.length-2][1]:'undefined';
        // 左侧模板 展示排名、击败率、击败类型
        tempHtml +=
         '<div style="float:left;width:29%;text-align: center;">'+
           '<h3 style="font-size: 0.95rem;margin-bottom:8px;margin-top:0.5rem;">'+config.leftTitle+'</h3>'+
            '<div style="width: 100%;">'+
                '<img src="https://view.baocloud.cn:7090/bsview/upload-image/yinzhang.png"  style="width: 2.3rem;opacity: 0.6;position:relative;left:-0.2rem;top:0.3rem;">'+
                '<h3 style="display: inline-block;font-weight:bolder;font-size:1.9rem;margin-bottom:0.8rem;margin-top:0.4rem;position:relative;left:-1.2rem;color: #64b0c8;">'+leftPM+'</h3>'+
                '<p style="font-size: 0.9rem;margin-bottom: 0;margin-top:-0.3rem;">超越<span style="color: #64b0c8;">'+leftJBL+'</span></p>'+
                '<p style="font-size: 0.9rem;">'+config.compareType+'</p>'+
            '</div>'+
         '</div>';
         // 右侧模板 展示列1、列2 目标值、当天值、当月值，与目标值比较、与昨天数据比较
        tempHtml +=
        '<div style="float:left;width:71%;text-align: center;">'+
            '<table style="width: 100%;" border="0">' +
                '<thead>' +
                    '<tr>' +
                        '<th style="width:22%;"></th>' +
                        '<th style="white-space:nowrap;text-align:center;">'+config.colName1+'</th>'+
                        '<th style="white-space:nowrap;text-align:center;">'+config.colName2+'</th>'+
                    '</tr>' +
                '</thead>' +
                '<tbody>' +
                    '<tr style="border-bottom: 1px solid #3d3535;">' +
                        '<td style="font-size:0.95rem;">目标值</td>' +
                        '<td style="color: #64b0c8;text-align:center;">'+config.targetRate1+'</td>' +
                        '<td style="color: #64b0c8;text-align:center;">'+config.targetRate2+'</td>' +
                    '</tr>' +
                    '<tr style="border-bottom: 1px solid #3d3535;">' +
                        '<td style="font-size:0.95rem;">当天</td>' +
                        setCompareTargetAndYesterdayRateStatus(todayVal1,yesterdayVal1, rootTodayCol1, config.targetRate1, config.sortType)+
                        setCompareTargetAndYesterdayRateStatus(todayVal11,yesterdayVal11, rootTodayCol11, config.targetRate2, config.sortType)+   
                         '</tr>' +
                    '<tr>' +
                        '<td style="font-size:0.95rem;">当月</td>' +
                        setCompareTargetAndYesterdayRateStatus(todayVal2,yesterdayVal2, rootTodayCol2, config.targetRate1, config.sortType)+
                        setCompareTargetAndYesterdayRateStatus(todayVal22,yesterdayVal22, rootTodayCol22, config.targetRate2, config.sortType)+
                    '</tr>' +
                '</tbody>' +
           '</table>' +
        '</div>';
        setHTML(config.sourceId, tempHtml);
    }
    returnRateTemplate(dataArr,tableConfig);
</script>

用布尔值需要注意的地方：

我们都知道在if条件表达式中，条件最终会转换成布尔值true/false。

    var data = '数据类型';
    // 导致数据0不能正常显示
    if(data){
        return data; 
    }else{
        return '--';
    }

当我们在拿到数据的时候，如果取到的是0，但它是正常数据，所以要排除掉0的情况。

数据为真（包含0），就显示数据，数据为null、undefined、""才使用--代替。

var leftPM;
if(data[0].valueRounded || data[0].valueRounded =='0'){
    leftPM = data[0].valueRounded;
}else{
    leftPM = '--';
}

简化三目运算：

var leftPM = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';