echarts“暂无数据”添加图片出不来

graphic: {
   type: 'image',
   right: 'center',
   top: 'middle',
   style: {
       image: '../../images/layout/chart-empty.jpg', //会报错，将图片转为base64即可
       width: 150,
       height: 150
   },
   invisible: barChartData.xAxis.length > 0 && barChartData.series.length > 0
} 

graphic中图片设置的相对路径，echarts报错图片404，显示不出来。点击红色的报错，显示图片格式是json格式

解决方法如下

1.找个可在线转为base64的网站，然后将码贴到image后
2.在HTML中引入图片，用JS去获取img元素

<!-- 在 HTML 文件的头部引入图片 -->
<img id="emptyImage" src="../../images/layout/chart-empty.jpg" style="display: none;">

<script>
<!-- echarts部分内容已省略 -->
graphic: {
    type: 'image',
    right: 'center',
    top: 'middle',
    style: {
        image: document.getElementById('emptyImage'),
        width: 150,
        height: 150
    },
    invisible: barChartData.xAxis.length > 0 && barChartData.series.length > 0
}
</script>