您现在的位置是:首页 > 正文

echart图表保存为图片的两种方式

2024-01-30 21:32:28阅读 0

echarts使用步骤

下载,配置echarts这里就不提了,按照官网来,官网链接,
下面是冲官网复制的例子:

// 1. 引入 echarts
import * as echarts from 'echarts';
// 2. 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 3. 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

toolbox.feature.saveAsImage

这种方式实在myChart.setOption中配置toolbox,toolbox具体配置参考官网

myChart.setOption({
	   toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    saveAsImage: {show: true},
                }
            },
})

这样这是玩之后,我们可以看到一个下载的图标, 之后当我们点击,就可以将echarts图表下载成图片了
在这里插入图片描述

myChart.getDataURL

getDataURL属于echarts内置API.官网链接放这里
具体的使用方法,代码直接放下面了:

	function exportImg() {
		const src = (myChart).getDataURL({
			pixelRatio: 2,
			backgroundColor: '#fff',
		});
		const a = document.createElement('a');
		a.href = src;
		a.download = 'chart-img';
		a.click();
	}

之后只要调用exportImg就可以将echarts图表下载成图片

补充: 将ucharts图表下载成图片

ucharts图表使用组件方式时,可以直接调用他的saveImage方法,就可以将ucharts图表下载成图片
(!!!ucharts的官网为什么不写!!!)
代码如下:

<template> 
	<button @click="loadImg"> 下载按钮 </button>
	<!-- opts, chartData 是配置项 -->
	<qiun-data-charts type="line" :opts="opts" :chartData="chartData" ref="echartsLine" :ontouch="true" />
</template>

<script setup>
const echartsLine = ref()

function loadImg() {
		echartsLine.value.saveImage()
	}
</script>


const 

网站文章

  • 头歌大数据——MapReduce 基础实战 答案 无解析

    头歌大数据——MapReduce 基础实战 答案 无解析

    2024-01-30 21:32:20
  • JMeter巧用计数器实现CSV数据文件设置的功能

    JMeter巧用计数器实现CSV数据文件设置的功能

    需求本次压测范围包含登录接口,但是压测环境user表用户数据量太少,和生产环境数据量不是一个量级,因此,需要先通过并发跑注册接口造用户数据需要参数化的字段是username和phone说明:本次演示的接口是示例接口,非实际生产环境接口注册接口如下:方案一:CSV 数据文件设置我们先通过代码(python或者java均可)造一定量的参数化数据写在参数化reg.txt文件中pac...

    2024-01-30 21:32:13
  • android线,android_线

    android线,android_线

    说明:android螺纹。android无非就是一个线程Main Thread和Worker Thread。(除了主线程Main Thread是Worker Thread)Main Thread 也叫...

    2024-01-30 21:31:35
  • HMM与CRF模型的使用过程存在哪些差异?

    HMM与CRF模型的使用过程存在哪些差异?

    训练后, 我们就得到了具备预测能力的新模型: lambda = CRF(w1, w2, ..., wn), 其中的模型参数已经改变.之后给定输入序列(x1, x2, ..., xn), 经过模型计算l...

    2024-01-30 21:31:28
  • Java读取文件为字符串】使用Java编程读取文件内容并将其作为字符串进行处理

    在Java中,读取文件内容需要使用文件输入流(FileInputStream)和缓冲区输入流(BufferedReader)。这是一个简单的示例,展示了如何使用Java读取文件并将其作为字符串进行处理...

    2024-01-30 21:31:21
  • flash制作车轮转动的汽车沿着路径走的动画

    flash制作车轮转动的汽车沿着路径走的动画

    二维动画制作实验报告一.实验目的1.掌握动画的概念。2.熟练Flash的界面。3.掌握Flash界面中各组成元素和功能。二.实验工具    Flash三.实验要求制作车轮转动的汽车沿着路径走。四.实验...

    2024-01-30 21:30:51
  • lattice-arc-post计算边上累计得分

    lattice-arc-post计算边上累计得分

    1 模型预测产生lat.1.gz这里请参考理解lattice,这里有介绍解码过程中如何产生lattice内容文件,以及lattice内容分析。2 边上累计得分gunzip -c 20200921.la...

    2024-01-30 21:30:45
  • CppCMS和Nginx协同工作

    为什么需要NginxCppCMS自己已经支持Http访问,为什么还需要Nginx.一些原因是我们需要动态负载平衡,还有原因是安全问题。下面的文字来自于CppCMS站点。CppCMS provides basic implementation of HTTP protocol and thus it can run behind reverse HTTP Proxy. But this o...

    2024-01-30 21:30:38
  • 12-Oracle包的定义与使用

    本章内容 1.包概述 2.包的创建 3.包的调用 4.包重载 5.包的初始化 6.包的持续性 7.包的串行化 8.包的管理

    2024-01-30 21:30:10
  • 面试篇--网络通信

    面试篇--网络通信

    目录【前言】【TCP三次握手】在TCP/IP协议中,TCP协议提供可靠的连接服务,采用 三次握手建立一个连接.1.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEN...

    2024-01-30 21:30:03