echarts下划线实现

echarts中无下划线实现，我采用图片填充文本块背景的方式实现

这是从

长空雁叫霜晨月

的博客中得到启发https://www.cnblogs.com/volodya/p/Echarts.html

图片

 

 代码

先将图片转化为base64编码，在将图片设置为文本块背景（使用网站http://tu.chacuo.net/imagetodataurl）

//定义背景图片
var hr = new Image();
hr.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADAQMAAABoE/fBAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAAAAApWe5zwAAAAJ0Uk5TAP9bkSK1AAAADklEQVR4nGNgYGhgYAAAAYYAgX1rxDcAAAAASUVORK5CYII=";
//
//
//
rich: {
    hr: {
        width: '100%',
        height: 3,
        backgroundColor: { image:hr }//文本块背景图片
    }
},
formatter: function (params)//文本（hr就是下划线行）
{
    return [`mm`, `{hr|}`, `m`].join("\n");
}

 

 效果