关于echart.js 中tooltip里面使用formatter图片不能正常显示的解决方法

最近在react项目中用echarts.js想重新定义一个tooltip的展示方式,代码如下:

tooltip : {

trigger: 'item',

formatter: function (params) {

return `<div class="toolDiv">

<div>img src={require('public/img/LeftContent/down.png')}/></div>

<div>

`

}

这个在本地的nodejs环境上面图片是能够正常显示的,但是打包发布到服务器上发现图片加载不出来,目前定位出的问题是

在服务器上加载页面的时候没有加载img图片的资源导致图片显示不出来

解决方案:

ooltip : {

trigger: 'item',

formatter: function (params) {

return `<div class="toolDiv">

<div class="bg-img"></div>

<div>

`

}

在less文件中

.bg-img{

background:url(图片的路径)

}

通过定义里面的class属性,然后在写里面加背景图片图片就可以正常显示

猜你喜欢

转载自blog.csdn.net/leixiang126/article/details/87916556