echarts添加水印

用echats做的一张图表需要添加水印,一般有两种做法:
1:直接用dom决定定位盖上去,这种方式缺陷比较大
2:用echats官方指定的做法,在options里面添加图片作为背景,但也有一些小缺陷,容易被上层的一些东西遮住。

var waterMarkText = 'ciika';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.1;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);

然后在通过参数配置进去

backgroundColor: {
 type: 'pattern',
 image: canvas,
 repeat: 'repeat'
}

cc.png

参考官方链接为
https://www.echartsjs.com/gallery/editor.html?c=watermark

标签: none

添加新评论