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: {
         '100%',
        height: 3,
        backgroundColor: { image:hr }//文本块背景图片
    }
},
formatter: function (params)//文本(hr就是下划线行)
{
    return [`mm`, `{hr|}`, `m`].join("
");
}

 效果

原文地址:https://www.cnblogs.com/ggtc/p/14990062.html