echarts 图片自定义下载、导出

来自：https://www.jianshu.com/p/90bf22936439 侵删除

 

 

 

//图表导出-自己的方法
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
              title: "保存图片",
              excludeComponents: ["toolbox"],
              pixelRatio: 1,
              backgroundColor: "#05233D",
            },
          },
        },

自定义方法

<el-button
          type="primary"
          size="medium"
          @click="Export('jpeg格式图片', 'klsjRefId', 'jpeg')"
          >导出</el-button
        >

Export(title, echartsBox, type) {
      // let myChart = echarts.getInstanceByDom(this.$refs["klsjRef"]);
      let myChart = echarts.getInstanceByDom(
        document.getElementById(echartsBox)
      );
      if (!myChart) {
        myChart = echarts.init(document.getElementById(echartsBox));
      }
      let picInfo = myChart.getDataURL({
        type: "png",
        pixelRatio: 1,
        backgroundColor: "#05233D",
      });
      let elink = document.createElement("a");
      elink.download = title;
      elink.style.display = "none";
      elink.href = picInfo;
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    },