当前位置：首页 > wzjs >正文

网站建设和风险分析东营网站搭建

wzjs 2025/9/21 21:26:55

网站建设和风险分析,东营网站搭建,门户网站建设定制,教育培训机构招生网站建设📊 如何使用 html2canvas 将 ECharts 图表导出为图片本篇教程将演示如何在 Vue 项目中使用 ECharts html2canvas 实现以下功能： 渲染多个 ECharts 图表使用 html2canvas 将页面指定区域截图导出为高清图片支持导出 PNG 文件（也可以后续插…

📊 如何使用 html2canvas 将 ECharts 图表导出为图片

本篇教程将演示如何在 Vue 项目中使用 ECharts + html2canvas 实现以下功能：

渲染多个 ECharts 图表
使用 html2canvas 将页面指定区域截图导出为高清图片
支持导出 PNG 文件（也可以后续插入 Word 等）

✅ 效果预览

在这里插入图片描述

点击「下载」按钮后，将当前图表区域导出为一张高清图片。

🧱 技术栈

Vue 2
ECharts
html2canvas（用于 DOM 转图片）

📦 安装依赖

使用 npm 安装 html2canvas：

npm install html2canvas

💡 页面结构说明

外层容器 #combatTable，控制截图区域，设置了固定宽高

内含两个 ECharts 图表容器 #bar 和 #bar2

下载按钮触发截图并导出 PNG

🧩 完整代码

<template><div><div @click="generateAndDownloadReport">下载</div><div style="height: 800px; width: 1200px" id="combatTable"><divstyle="height: 300px; width: 100px; display: inline-block"id="bar"></div><divstyle="height: 300px; width: 450px; display: inline-block"id="bar2"></div></div></div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {name: '',components: {},mixins: [],props: {},data() {return {};},computed: {},watch: {},mounted() {this.getEcharts();},methods: {getEcharts() {const panCharts = this.$echarts.init(document.querySelector('#bar'));const panCharts2 = this.$echarts.init(document.querySelector('#bar2'));let chartData = [95.65, 96.15, 96.82, 97.45, 97.85, 99.23, 99.79, 100.77, 100.03,101.75, 101.42, 101.54, 101.24, 102.65, 103.08, 103.22, 102.87,101.86, 101.3, 100.04, 101.08, 98.58, 98.42, 99, 98.94, 99.21,99.29, 100.2, 100.41, 100.26, 101.88, 103.26, 105.1, 109.39,108.48, 108.71, 108.18, 109.15, 109.6, 106.76, 107.35, 106.77,105.99, 105.48, 104.52, 104.25, 104.94, 103.35, 103.55,];const xData = Array.from({ length: chartData.length },(_, index) => index);let options = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',},},xAxis: {type: 'category',data: xData,},yAxis: {scale: true,},series: [{symbolSize: 10,data: xData.map((x, i) => [x, chartData[i]]),type: 'scatter',},],};// 渲染 echartspanCharts.setOption(options, true);panCharts2.setOption(options, true);},generateAndDownloadReport() {try {const targetElement = document.getElementById('combatTable');html2canvas(targetElement, {scale: 1, // 提高分辨率backgroundColor: '#ffffff', // 背景色（可自定义）useCORS: true, // 如果有加载图片或图标}).then((canvas) => {// 生成图片链接const link = document.createElement('a');link.download = 'combat-report.png';link.href = canvas.toDataURL('image/png', 0.0);// 下载图片document.body.appendChild(link);link.click();document.body.removeChild(link);});} catch (error) {console.error('生成报告失败:', error);alert('下载失败：' + error.message);}},},
};
</script>
<style lang="" scoped></style>