页面树结构
转至元数据结尾
转至元数据起始

该宏示例在 V10.5上 验证通过

提示:本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。

说明:此示例宏仅供参考,若实际场景与此示例不符合,须自行调整宏代码。

需求

仪表分析图形在没有数据的时候,会显示No data,如果想要修改显示的文字或者是修改文字样式,可以参考以下宏示例。

          

最终效果:

          

 

宏类型

 

类型

对象

事件

ClientSide

chart

afterRenderer


宏代码:

function main(chartView) {
    //方式一
    var chartRenderTo = document.getElementById("chartRenderTo");
    if (chartRenderTo && chartRenderTo.noDataDiv) {
        //chartRenderTo.noDataDiv.style.display = "none";//不显示
        chartRenderTo.noDataDiv.innerHTML = "温馨提示:无数据噢~"; //修改显示内容
        chartRenderTo.noDataDiv.style.color = '#FF4040'; //修改字体颜色
        chartRenderTo.noDataDiv.style.fontSize = '16px'; //修改字体大小
    }
    // 方式二
    /*var chartPane = chartView.getContext().chartPane;
    if (chartPane) {
        var chartRenderTo = $(chartPane).find("#chartRenderTo").get(0);
        if (chartRenderTo && chartRenderTo.noDataDiv) {
            chartRenderTo.noDataDiv.innerHTML = "温馨提示:无数据噢~";
            chartRenderTo.noDataDiv.style.color = '#FF4040'; //修改字体颜色
            chartRenderTo.noDataDiv.style.fontSize = '16px'; //修改字体大小
        }
    }*/
}


         注:电子表格的echarts图形没有数据时的修改,可参考如下宏实现:

         

function main(chartView) {
    var chart = chartView.getChartObject();
    if (chart.container.noDataDiv)

    {
        chart.container.noDataDiv.innerHTML = "此柱图无数据";
        chart.container.noDataDiv.style.color = '#FF4040'; //修改字体颜色 
        chart.container.noDataDiv.style.fontSize = '30px'; //修改字体大小 
    }
}


示例资源:修改图形没数据时的显示信息.xml