首页 > 其他分享 >echarts 图片自定义下载、导出

echarts 图片自定义下载、导出

时间:2022-12-13 10:33:08浏览次数:52  
标签:elink 自定义 导出 myChart let document 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);
    },

 

标签:elink,自定义,导出,myChart,let,document,echarts
From: https://www.cnblogs.com/Byme/p/16977873.html

相关文章

  • AntD中Form表单自定义验证规则
    <Form.Item label="学生编码" name="stuId" validateFirst={true}//出错时两个校验分别生效 rules={[ {required:true,message:'学生编码不能为空'}, {val......
  • 在微信小程序上做一个「年度总结」:在小程序上使用echarts
    在年度总结中,有2张柱状图,分别是月度新增随笔趋势和年度新增随笔趋势本文继续介绍一下如何在小程序中使用echarts插入图表1、下载依赖文件地址:​​echarts-for-weixin​​解......
  • Unity 自定义创建脚本模板
    Unity自定义创建脚本模板原理:以模板代码为底板,通过关键字替换来实现代码创建两种实现方案方案11.先准备好对应的代码模板,放到Assets\ScriptTemplates目录下usingSys......
  • 数据导出到execl
    ​给出了完整的代码示例:  使用了java反射,对数据进行处理.所以属性取数据方法必须是getXxx而不能是isXxx包括boolean类型的需要修改下   使用了......
  • 自定义分页器
    自定义分页器目录自定义分页器1、分页推导2、分页器代码封装1、分页推导queryset对象支持切片操作确定用户访问的页码url?page=1current_page=request.GET.......
  • DataGear 制作自定义柱状图条目颜色的数据可视化看板
    DataGear看板提供了dg-chart-options图表选项配置功能,可自定义样式、位置、显示内容等图表选项,其中的processUpdateOptions回调函数配置项,可以在图表更新数据前以编程方式......
  • CAD图如何转换成PDF?CAD导出PDF教程
    CAD图纸设计完成后,通常会需要将其转换成PDF格式进行流转。那么,你知道CAD图如何转换成PDF吗?本文小编就以浩辰CAD软件为例给大家分享无需安装任何插件,一键将CAD导出PDF格式。......
  • java 实现Excel导入导出功能
    本文记录首先需要准备一个导入模板的实体类importcn.iocoder.yudao.framework.excel.core.annotations.DictFormat;importcn.iocoder.yudao.framework.excel.core.co......
  • 前端开发系列051-基础篇之自定义事件和插槽(Vue)
    title:前端开发系列051-基础篇之自定义事件和插槽(Vue)tags:categories:[]date:2017-12-1400:00:00本文是早期学习Vue整理的一些阶段性总结,内容主要关于Vue框架......
  • 那些你不知道的 CSS 自定义形状网格布局 3
    本文翻译自CSSGridandCustomShapes,Part3,略有删改原作者:TemaniAfif基于CSS自定义网格已发布第一部分和第二部分,本文将开始第三部分探讨更多的奇特自定义形状,与......