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() 否则图表将无法展示。

通过 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',
                invisible: show,
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                    fill: '#fff',
                    fontWeight: 'bold',
                    text: '暂无数据',
                    fontSize: '26px',
                },
            },
        ],
  }
  myChart.setOption(option)
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)

这种方式的实现原理是在图表上再增加一个图层，图层上写着暂无数据的提示，如果想要展示图片的话也是可以的，比较灵活，所以个人认为这种方式是最佳的解决方案。

附：graphic 配置项手册