在Echarts中使用graphic配置无数据展示图表样式。

 

最近碰到一个需求，在展示echarts的图表时，使用echarts的api（getDataURL）来获取图表转为图片的base64转码，但是如果无数据时则会转出空白的图片，但是需求要求无数据也需要将其转出并且展示暂无数据的文字提示，最后在echarts中发现了graphic属性。

 graphic: {
          type: 'text',
          left: 'center',
          top: 'middle',
          silent: true,
          invisible: data.length != 0, //是否可见，这里的意思是当没有数据时可见
          style: {
            fill: 'black',
            font: '36px "bold" ',
            text: '暂无数据',
          },
        },

这样配置之后，如果判断传入echarts的数据为空时，则会展示暂无数据的字体提示，将其转换为base64转码再转为图片之后，转出之后则会显示该效果。