快捷導(dǎo)航

將Echarts圖表導(dǎo)出為圖片的3種方法總結(jié)

更新時間：2023年06月30日 09:45:35 作者：慢慢manman

這篇文章主要給大家介紹了關(guān)于將Echarts圖表導(dǎo)出為圖片的3種方法,Echarts是一種基于JavaScript的可視化庫,用于創(chuàng)建豐富、交互式的圖表和地圖,而Excel是一種電子表格軟件,用于數(shù)據(jù)處理和分析,需要的朋友可以參考下

第一種使用 html2canvas 對dom元素截圖

1.npm安裝

npm install html2canvas

yarn安裝

yarn add html2canvas

2.組件引入

import html2canvas from "html2canvas"

3.代碼

// 導(dǎo)出多張圖表為一張圖片
// dmo元素里的內(nèi)容轉(zhuǎn)換為canvas,并將canvas下載為圖片
const download = () => {
  // 轉(zhuǎn)換成canvas
  html2canvas(document.getElementById("echarts")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    // 創(chuàng)建a標(biāo)簽，實(shí)現(xiàn)下載
    var creatIMg = document.createElement("a");
    creatIMg.download = "圖表.png"; // 設(shè)置下載的文件名，
    creatIMg.href = img; // 下載url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下載之后把創(chuàng)建的元素刪除
  });
};

第二種使用Echarts官方文檔中的 getDataURL 方法

// 導(dǎo)出單個圖表圖片
function Export() {
  var img = new Image();
  // pieMyChart1 要導(dǎo)出的圖表
  img.src = pieMyChart1.value.getDataURL({
    type: "png",
    pixelRatio: 1, //放大2倍
    backgroundColor: "#fff",
  });
  img.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    var event = new MouseEvent("click");
    a.download = "圖片.png" || "下載圖片名稱";
    // 將生成的URL設(shè)置為a.href屬性
    a.href = dataURL;
    // 觸發(fā)a的單擊事件
    a.dispatchEvent(event);
    a.remove();
  };
}

第三種使用Echarts官方文檔中的 toolbox

toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        saveAsImage: { show: true },  // 保存圖表
      },
},

完整代碼

<template>
  <el-scrollbar>
    <div style="padding: 10px 10px 0">
      <el-button type="primary" @click="refresh">刷新</el-button>
      <el-button @click="download">下載</el-button>
      <el-button @click="Export">導(dǎo)出pie</el-button>
    </div>
    <el-divider />
    <div id="echarts">
      <div class="about" id="main"></div>
      <div class="about" id="pie"></div>
    </div>
  </el-scrollbar>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import html2canvas from "html2canvas";
const { appContext } = getCurrentInstance();
const { $echarts } = appContext.config.globalProperties;
onMounted(() => {
  setEcharts();
});
const pieMyChart1 = ref(null);
const setEcharts = () => {
  // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
  var myChart = $echarts.init(document.getElementById("main"));
  // 繪制圖表
  myChart.setOption({
    title: {
      text: "ECharts 入門示例",
    },
    tooltip: {},
    xAxis: {
      data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
      axisTick: {
        // 坐標(biāo)軸刻度標(biāo)簽
        show: false,
      },
    },
    yAxis: {
      type: "value", // 類型數(shù)值軸
      min: 0,
      max: 40,
      splitNumber: 8, // 坐標(biāo)軸的分割段數(shù)
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false, // 隱藏刻度
      },
    },
    series: [
      {
        name: "銷量",
        type: "bar",
        label: {
          show: true,
          fontSize: 16,
        },
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
          borderRadius: 5,
          borderWidth: 1,
          borderType: "solid",
          borderColor: "#73c0de",
        },
      },
    ],
  });
  // 繪制圖表
  const pieMyChart = $echarts.init(document.getElementById("pie"));
  pieMyChart1.value = pieMyChart;
  pieMyChart.setOption({
    title: {
      text: "ECharts 入門示例",
      titleStyle: {
        lineHeight: 18,
      },
      top: "0px",
    },
    tooltip: {},
    legend: {
      orient: "vertical",
      x: "left",
      data: ["A", "B", "C", "D", "E"],
      top: "80px",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        saveAsImage: { show: true }, // 保存圖表
      },
    },
    series: [
      {
        type: "pie",
        data: [
          {
            value: 335,
            name: "A",
          },
          {
            value: 234,
            name: "B",
          },
          {
            value: 548,
            name: "C",
          },
          {
            value: 500,
            name: "D",
          },
          {
            value: 500,
            name: "E",
          },
        ],
      },
    ],
  });
};
// 頁面刷新
const refresh = () => {
  location.reload();
};
// 導(dǎo)出多張圖表為一張圖片
// dmo元素里的內(nèi)容轉(zhuǎn)換為canvas,并將canvas下載為圖片
const download = () => {
  // 轉(zhuǎn)換成canvas
  html2canvas(document.getElementById("echarts")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    // 創(chuàng)建a標(biāo)簽，實(shí)現(xiàn)下載
    var creatIMg = document.createElement("a");
    creatIMg.download = "圖表.png"; // 設(shè)置下載的文件名，
    creatIMg.href = img; // 下載url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下載之后把創(chuàng)建的元素刪除
  });
};
// 導(dǎo)出單個圖表圖片
function Export() {
  var img = new Image();
  img.src = pieMyChart1.value.getDataURL({
    type: "png",
    pixelRatio: 1, //放大2倍
    backgroundColor: "#fff",
  });
  img.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    var event = new MouseEvent("click");
    a.download = "圖片.png" || "下載圖片名稱";
    // 將生成的URL設(shè)置為a.href屬性
    a.href = dataURL;
    // 觸發(fā)a的單擊事件
    a.dispatchEvent(event);
    a.remove();
  };
}
</script>
<style>
.el-scrollbar {
  height: calc(100vh - 59px);
}
.el-divider--horizontal {
  margin: 10px 0;
}
#echarts {
  padding: 20px;
  width: 600px;
}
#main {
  height: 300px;
  width: 600px;
}
#pie {
  height: 300px;
  width: 600px;
}
</style>

總結(jié)

到此這篇關(guān)于將Echarts圖表導(dǎo)出為圖片的3種方法的文章就介紹到這了,更多相關(guān)Echarts圖表導(dǎo)出為圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: