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

蜗牛升值记

已于 2023-11-16 11:41:33 修改

阅读量5.5k

点赞数 2

文章标签： vue echarts

于 2023-08-11 13:08:31 首次发布

本文链接：https://blog.csdn.net/weixin_69773376/article/details/132213871

版权

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