echarts图表导出图片的时候想在图上添加文字

需求描述
如图所示，导出图表的同时想把上面的总数量添加到图片上，由于上面样式较复杂不能设置为图表的名称，只能在导出的时候把总数量添加到图片是
导出效果如下：

    echartsExport(id) {
         //是获取时间，导出的时候图片名称要加上时间字段
      let timeRange = this.form.startDate.map((item) => {
        return item.replace(/-/g, "/");
      });
      //图片导出的名称加上时间段
      let fileName = `工作站使用趋势图折线图${timeRange.join("-")}`;
      // 克隆一份canvas，否则导出的时候添加文字会影响页面显示，页面也会显示出来你添加的文字
      let Id = document.getElementById(id).getElementsByTagName("canvas")[0];
      let canvas = Id.cloneNode(true);
      let context = canvas.getContext("2d"); //创建画布
      // 获取canvas的图片（不能用上面克隆的canvas获取图片，否则获取不到）
      let imgUrl = document
        .getElementById(id)
        .getElementsByTagName("canvas")[0];
      let img = new Image();
      //加载图片
      img.src = imgUrl.toDataURL();
      img.onload = () => {
        canvas.setAttribute("width", img.width);
        canvas.setAttribute("height", img.height);
        //绘制图片
        context.drawImage(img, 0, 0, img.width, img.height);
        //字体大小
        context.font = "14px Arial";
        //字体文字，显示位置  图片上需要n个文字就写n个context.fillText(文字,上下,左右);
        context.fillText(`累计活跃数量：${this.count.sumCount || 0}`, 150, 20);
        context.fillText(`累计使用人次：${this.count.sumCount || 0}`, 350, 20);
        context.fillText(`有效调阅次数：${this.count.sumCount || 0}`, 550, 20);
        //合成图片
        const rUrl = canvas.toDataURL("image/png", 1.0);
        const link = document.createElement("a"); // 创建a标签
        link.href = rUrl;
        link.download = fileName; // 重命名文件
        link.click();
        URL.revokeObjectURL(rUrl); // 释放内存
      };
    },

这篇好文章是转载于：学新通技术网