echarts下载带水印和不带水印的图片

最近公司有个需求，要求可以根据用户权限，控制下载不同类型的数据形式，其中有带水印和不带水印的图片两项。

前期考虑使用cavas，在下载时绘制一张地图，然后合成一张。

后面采取了改变图表option配置的方式，即在下载时使用echarts实例方法：setOption（）。

setOption：设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。

注意一点，就是noMerge参数。 setOption（option<配置>,noMerge<是否合并> ） notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。

这里采取的时不合并，让组件重新渲染，这样下载的时候才会出现水印的效果。

    downloadWithWatermark(echart) {
      let option = echart.getOption();
      // 添加水印
      option.graphic = [
        {
          type: 'group',
          // rotation: Math.PI / 4,//正方形旋转的角度
          bounding: 'raw',
          right: 85,
          bottom: 70,
          z: 100,
          children: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              z: 100,
              style: {
                fill: 'rgba(0,0,0,0.2)',
                text: 'data.variflight.com',
                font: 'bolder 18px Microsoft YaHei'
              }
            }
          ]
        }
      ]
      echart.setOption(option, true)
      // 将ECharts图表转换为图片数据URL
      const imageDataURL = echart.getDataURL({ pixelRatio: 2 });
      const downloadLink = document.createElement('a');
      downloadLink.href = imageDataURL;
      downloadLink.download = 'chart.jpg';
      downloadLink.click();
      // 去除水印
      option.graphic = [];
      echart.setOption(option, true);
      this.chioceDowloadType = false
    }