先安装水印插件
npm install --save watermark-dom
然后在全部页面应用 AppMain.vue
<script>
import { mapGetters } from "vuex";
import watermark from "watermark-dom";
export default {
name: "AppMain",
computed: {
key() {
return this.$route.path;
},
...mapGetters(["nickName"]),
},
mounted() {
// 加载水印
watermark.load({
watermark_txt: "系统" + "-" + this.nickName, //水印内容
watermark_fontsize: "16px", //z字体大小
watermark_alpha: 0.1, //水印透明度,要求设置在大于等于0.005
watermark_width: 160, //水印宽度
watermark_x_space: 150, //水印x轴间隔
watermark_y_space: 100, //水印y轴间隔
watermark_angle: 20, //水印倾斜度数
});
},
};
</script>
在echarts图中添加水印
var chartDom = document.getElementById("main");
var myChartA = echarts.init(chartDom);
var option;
// //绘制水印
// const waterMarkText = “水印内容”;
// const canvas = document.createElement("canvas");
// const ctx = canvas.getContext("2d");
// canvas.width = canvas.height = 100;
// ctx.textAlign = "center";
// ctx.textBaseline = "middle";
// ctx.globalAlpha = 0.2; //透明度
// ctx.fillStyle = "#72A0FF"; //字体颜色
// ctx.font = "14px Microsoft Yahei"; //字体大小样式
// ctx.translate(50, 50);
// ctx.rotate(-Math.PI / 4);
// ctx.fillText(waterMarkText, 0, 0);
option = {
// backgroundColor: {
// //在背景属性中添加
// type: "pattern",
// image: canvas,
// repeat: "repeat",
// },
}