如題，本文用于記錄 Echarts 實現 暫無數據 的幾種方式。

以下幾種實現方式的 HTML 代碼均如下：

<div id="noData" style="width: 100%;height:400px;"></div>

通過 title 配置項來實現

const init = (data) => {const myChart = echarts.init(document.getElementById('noData'))const option = {title: {show: !data.length, // 無數據時展示 titletextStyle: {color: 'black',fontSize: 26},text: '暫無數據',left: 'center',top: 'center'},xAxis: {show: data.length, // 無數據時不展示 x 軸type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data,type: 'line'}]}myChart.setOption(option) } // const data = [150, 230, 224, 218, 135, 147, 260] const data = [] init(data)

通過 showLoading API 來實現

const init = (data) => {const myChart = echarts.init(document.getElementById('noData'))const option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data,type: 'line'}]}myChart.setOption(option)if (!data.length) {myChart.showLoading({text: '暫無數據',showSpinner: false,textColor: 'black',maskColor: 'rgba(255, 255, 255, 1)',fontSize: '26px',fontWeight: 'bold'})} else {myChart.hideLoading()} } // const data = [150, 230, 224, 218, 135, 147, 260] const data = [] init(data)

有數據時記得調用 hideLoading() 否則圖表將無法展示。

附：showLoading API

通過 graphic 配置項來實現

const init = (data) => {const myChart = echarts.init(document.getElementById('noData'))const option = {xAxis: {show: data.length, // 無數據時不展示 x 軸type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data,type: 'line'}],graphic: {type: 'text',left: 'center',top: 'middle',silent: true,invisible: data.length,style: {fill: 'black',fontWeight: 'bold',text: '暫無數據',fontSize: '26px'}}}myChart.setOption(option) } // const data = [150, 230, 224, 218, 135, 147, 260] const data = [] init(data)

這種方式的實現原理是在圖表上再增加一個圖層，圖層上寫著暫無數據的提示，如果想要展示圖片的話也是可以的，比較靈活，所以個人認為這種方式是最佳的解決方案。

附：graphic 配置項手冊

總結

以上是生活随笔為你收集整理的Echarts实现“暂无数据”的几种方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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