How to use Watermark

[mprzydatek]

Hi,
i was browsing through the code but couldn't find the Watermark feature implemented.

Therefore, I'm wondering if i missed it (it goes by a different name) or there is some "workaround" to set it up directly on the canvas context like here?

const waterMarkText = 'ECHARTS';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillText(waterMarkText, 0, 0);

Any help would be much appreciated

Additional question: Is there a way to use an image/svg logo as a watermark? or text only?

Thank you.
Best,

[mprzydatek]

OK, i just found it myself. It can be achieved with the "graphic" option like this:

import { GraphicComponent } from 'echarts/components'

graphic: [
  {
    type: 'group',
    rotation: Math.PI / 4,
    bounding: 'raw',
    right: 110,
    bottom: 110,
    z: 100,
    children: [
      {
        type: 'rect',
        left: 'center',
        top: 'center',
        z: 100,
        shape: {
          width: 400,
          height: 50,
        },
        style: {
          fill: 'rgba(0,0,0,0.3)',
        },
      },
      {
        type: 'text',
        left: 'center',
        top: 'center',
        z: 100,
        style: {
          fill: '#fff',
          text: 'ECHARTS LINE CHART',
          font: 'bold 26px sans-serif',
        },
      },
    ],
  },
],