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

echart 导出图片及自定义图片名称

news 2026/6/13 10:27:04

1、展示图片

<template>

   <el-row><div ><el-button @click="handleExportPic">导出pie</el-button></div><div id="echarts"><div class="el-table el-table--enable-row-hover el-table--medium"><div id="perChart" style="height: 270px;width: 100%"/></div></el-row>
</template>

2、常量定义

const myPerChart =null;

3、绑定数据

 初始化echarts实例this.myPerChart = $echarts.init(document.getElementById("perChart"));// 绘制图表this.myPerChart .setOption({title: {text: "ECharts 入门示例",},tooltip: {},xAxis: {data: ["1月份", "2月份", "3月份", "4月份", "5月份", "6月份"],axisTick: {// 坐标轴刻度标签show: false,},},yAxis: {type: "value", // 类型数值轴min: 0,max: 40,splitNumber: 8, // 坐标轴的分割段数
      axisLine: {show: true,},axisTick: {show: false, // 隐藏刻度
      },},series: [{name: "展示的是月份表数据",type: "bar",label: {show: true,fontSize: 16,},data: [115, 288, 369, 560, 789, 898],itemStyle: {borderRadius: 5,borderWidth: 1,borderType: "solid",borderColor: "#76c0de",},},],});

4、导出

handleExportPic(){var img = new Image();img.src = this.myPerChart.getDataURL({type: "png",pixelRatio: 2, //放大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");let strHead = '图片名称_';let currentTime = new Date().getTime();// 当前时间let tail = '.png';a.download = `${strHead}${currentTime}${tail}`;// 将生成的URL设置为a.href属性 '${strHead}${currentTime}${tail}'a.href = dataURL;// 触发a的单击事件a.dispatchEvent(event);a.remove();};},