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");
}

 

 效果