一、顯示暫無數據

參照(26條消息) 新版ECharts實現“暫無數據”的完美解決方案_Harryfin的博客-CSDN博客_echarts沒有數據怎么展示

graphic: {type: 'text', // 類型：文本left: 'center',top: 'middle',silent: true, // 不響應事件invisible: data.length > 0, // 有數據就隱藏style: {fill: '#9d9d9d',fontWeight: 'bold',text: '暫無數據',fontFamily: 'Microsoft YaHei',fontSize: '25px'} }

二、圖片代替

//首先引入圖片 import noData from '../../../../assets/images/dataMissed.png' //配置 if (this.Arr.length == 0) {//無數據const noDataImg = noData // 暫無數據圖片路徑const averageChart = document.getElementById('average-chart')averageChart.style.display = 'flex'averageChart.style.flexDirection = 'column'averageChart.style.justifyContent = 'center'averageChart.style.alignItems = 'center'averageChart.removeChild(averageChart.firstChild) // 移除const mainImg = document.createElement('img') // 添加要顯示的圖片averageChart.appendChild(mainImg)mainImg.style.width = 'auto'mainImg.style.height = 'auto'mainImg.src = noDataImgconst pBlock = document.createElement('p')//添加p標簽averageChart.appendChild(pBlock)pBlock.innerHTML = '暫無數據'pBlock.style.color = '#999999'} else {let aveShow = false//小于8條數據不顯示滾輪if (this.subNameArr.length > 8) {aveShow = true}averageChart.setOption({....})//開始配置}

三、實現效果

有數據時：

無數據時：?

總結

以上是生活随笔為你收集整理的echarts无数据时显示暂无数据或者用图片代替的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。