1. 程式人生 > 其它 >echarts 圖片自定義下載、匯出

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); },