echarts背景添加水印的方法有很多,目前简单介绍两种:
1. 通过echarts提供的工具 graphic 实现
1)首先引入工具:
import VueEcharts from "vue-echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
2)使用:
options:{
...其他配置项,
graphic: {
elements: generateWatermarks(),
},
...其他配置项,
}
//生成水印的方法
const generateWatermarks = () => {
const watermarks: any[] = [];
const maxRotationAngle = 15; // 最大倾斜角度
const rotationStep = maxRotationAngle / 9; // 控制每行或每列的倾斜变化幅度
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
// 计算每个水印的旋转角度,这里使用行列索引结合以获得不同角度
const rotationAngle = (i + j) * rotationStep;
watermarks.push({
type: "text",
left: i * 30 + "%",
top: j * 30 + "%",
z: -10,
style: {
fill: "rgba(0,0,0,0.1)",
text: "xxx",//水印文字
font: "bold 20px Microsoft YaHei",
transform: `rotate(${rotationAngle}deg)`, // 应用水印旋转
},
});
}
}
return watermarks;
};
注意:该方式如果未生效可检查使用的echarts版本是否支持水印
2.通过canvas使用
const canvas = ref<any>(null);
//options配置项
const chartData = ref<any>({
...其它配置项,
backgroundColor: {
//在背景属性中添加
type: "pattern",
image: canvas,
repeat: "repeat",
},
...其它配置项,
})
//声明一个生成水印的函数
const addWatermark = () => {
const waterMarkText = "xxxxx";//填充水印的文字
canvas.value = document.createElement("canvas");
const ctx: any = canvas.value.getContext("2d");
canvas.value.width = canvas.value.height = 180;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.globalAlpha = 0.07;
ctx.font = "20px Microsoft Yahei";
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);//水印倾斜的角度
ctx.fillText(waterMarkText, 0, 0);
};
//onMounted函数中执行该方法
onMounted(() => {
addWatermark();
});
效果图如果所示:
总结:第二种方法比较好用,推荐第二种,不仅可以适配echarts还可以适配其他场景。