说明:此示例宏仅供参考,若实际场景与此示例不符合,须自行调整宏代码。
需求
仪表分析图形在没有数据的时候,会显示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