Echarts实现“暂无数据”的几种方案

如题，本文用于记录 Echarts 实现 暂无数据 的几种方式。

以下几种实现方式的 HTML 代码均如下：

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

1. 通过 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)
   

2. 通过 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

3. 通过 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 配置项手册