Echarts實現暫無數據的三種方法

更新時間：2023年08月08日 10:41:17 作者：趣果有間

本文將介紹如何使用Echarts實現暫無數據的三種方法,詳細講解這三種方法的實現步驟和效果展示,幫助讀者更好地理解如何在Echarts中處理暫無數據的情況

通過 title 配置項來實現

const init = (data) => {
  const myChart = echarts.init(document.getElementById('noData'))
  const option = {
    title: {
      show: !data.length, // 無數據時展示 title
      textStyle: {
        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實現暫無數據的三種方法的文章就介紹到這了,更多相關Echarts 暫無數據內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: