我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。

 正常情况渲染图表：

<p id="test_chart" style="width: 600px;height:400px;"></p><script>let chartData = [5, 20, 36, 10, 10, 20];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('test_chart'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫']},yAxis: {},series: [{name: '销量',type: 'bar',data: chartData //动态数据}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>

我们只需要：在定义option的外面加一个if条件判断，判断动态获取的数据是否有值，有则渲染图表，无则渲染指定内容——可以是暂无数据的图片，也可以是文字

1、显示“暂无数据”文字 

<p id="test_chart" style="width: 600px;height:400px;"></p><script>let chartData = [5, 20, 36, 10, 10, 20];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('test_chart'));var option;// 指定图表的配置项和数据if (chartData.length == 0 ) { //暂无数据option = {title: {text: '暂无数据',x: 'center',y: 'center',textStyle: {fontSize: 14,fontWeight: 'normal',}}}} else {option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫']},yAxis: {},series: [{name: '销量',type: 'bar',data: chartData //动态数据}]};}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>

效果如下： 

需要注意的是，如果有值的option里面没有定义title属性，那么就无法覆盖无值的情况渲染的“暂无数据”title，我们可以给它赋空值。

option = {title:{text:''},xAxis:{},yAxis:{},series:{},}

2、显示“暂无数据”图片

 封装了一个noDataChart函数（可以直接复制使用），在上面的if判断为真的时候，调用这个函数，显示暂无数据图片即可。

// 暂无数据处理函数noDataChart(dom){ //传入图表所在的dom节点dom.removeChild(dom.firstChild)const mainImg = document.createElement('img')dom.appendChild(mainImg) // 定义要显示的图片mainImg.style.width = 'auto'mainImg.style.height = 'auto'mainImg.src = noDataImg // 要显示图片的src路径，由外部统一定义，或直接写在这里也可以const mainText = document.createElement('h3') //定义显示文字dom.appendChild(mainText)dom.style.display = 'flex'dom.style.flexDirection = 'column'dom.style.justifyContent = 'center'dom.style.alignItems = 'center'mainText.innerHTML = '暂无数据'mainText.style.color = '#999999'dom.removeAttribute('_echarts_instance_')},// 图表绘制函数function myChartFunc(){let dom = document.getElementById('test_chart')var myChart = echarts.getInstanceByDom(dom); //存在dom节点，获取已有的echarts实例的dom节点if ( myChart == null ) { //不存在，进行初始化操作myChart = echarts.init(dom);}// 指定图表的配置项和数据if (chartData.length == 0 ) { //暂无数据this.noDataChart(dom) //---调用暂无数据处理函数} else {var option = {title: {text: 'ECharts 入门示例'},/*图表相关配置*/ }myChart.setOption(option)}}

 注意点：

        1、noDataChart函数中使用的暂无数据图片noDataImg由外部定义，此处直接使用，可以根据需要选择外部定义或者是直接将图片路径写在对应位置；

        2、在图表绘制函数内部，判断有无数据之前，新增了一条if语句，判断图表dom节点是否存在，存在则直接获取echarts实例，否则进行初始化操作；

        3、因为在这种情况下，图表无数据时，我们没有使用到option变量，如果还是将option的声明写在if条件外侧（且myChart.setOption(option)也在外侧），那暂无数据的情况会导致setOption语句获取到option为undefined报错，所以直接将option的声明和定义、以及myChart.setOption(option)语句写在有数据的else代码块内部。