echarts背景添加水印

echarts背景添加水印的方法有很多，目前简单介绍两种：

1. 通过echarts提供的工具 graphic 实现

// 首先引入工具：
import VueEcharts from "vue-echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

//使用：
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还可以适配其他场景。