需求：
echart提供的导出的图片上，我们想在图片上添加一些说明文字，这个文字在echart图表上没有的
思路：
1.隐藏echarts自带的saveAsImage保存为图片的方法
2. 在echart里自定义写工具类，里面的点击事件自己写一个保存为图片的js函数
3. 完成js函数，实现目标效果
这个是页面上有下载按钮的echarts图表：
这个是点击下载按钮后导出的图片：
下方为具体的实现：
1.隐藏echarts自带的saveAsImage保存为图片的方法
saveAsImage: { // 这个是echarts自带的保存为图片的函数，我把show改为false,屏蔽这个自带的
show: false,
title: '保存为图片'
}2. 在echart里自定义写工具类，里面的点击事件自己写一个保存为图片的js函数
myToolId为图表的id,你自己定义的
myTool1: {
show: true,
title: '保存为图片',
icon: 'path://M923.3 807.1c-32.1 55.5-91.8 90-155.8 90h-488c-64.1 0-123.8-34.5-155.8-90-8-13.9-3.3-31.6 10.6-39.6 13.9-8.1 31.6-3.3 39.6 10.6 21.7 37.6 62.2 61 105.6 61h488.1c43.4 0 83.9-23.4 105.6-61 8-13.8 25.9-18.6 39.6-10.6 13.8 8 18.6 25.7 10.5 39.6zM503 714.6c2.7 2.7 5.9 4.8 9.5 6.3 3.5 1.5 7.3 2.2 11.1 2.2s7.5-0.8 11.1-2.2c3.6-1.5 6.8-3.6 9.5-6.3l213.7-213.7c11.3-11.3 11.3-29.6 0-41s-29.6-11.3-41 0L552.5 624.2V92.8c0-16-13-29-29-29s-29 13-29 29v531.4L330.3 459.9c-11.3-11.3-29.6-11.3-41 0s-11.3 29.6 0 41L503 714.6z',
onclick: () => {
// 要使用箭头函数
this.downloadImpByChart(this.myToolId) // 调用downloadImpByChart这个js函数
}
}3. 完成js函数，实现目标效果
downloadImpByChart(chartId) {
// 获取 ECharts 图表实例
var myChart = echarts.getInstanceByDom(document.getElementById(chartId))
// 获取图表当前的 connectedDataURL
var url = myChart.getConnectedDataURL({
pixelRatio: 5, // 设置图片分辨率
backgroundColor: '#fff', // 背景色
excludeComponents: [ // 导出时忽略的工具组件
'toolbox'
],
type: 'png' // 图片类型
})
// 创建一个临时的 Image 对象，加载原始图表的图片
var img = new Image()
img.src = url
img.onload = () => {
// 获取图像的宽高
var width = img.width
var height = img.height
// 创建一个新的 canvas 用于绘制带文字的图像
var canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
var ctx = canvas.getContext('2d')
// 首先绘制原图
ctx.drawImage(img, 0, 0)
// 设置绘制文字的样式
ctx.font = '50px Arial' // 设置文字字体和大小
ctx.fillStyle = 'black' // 设置文字颜色
ctx.textBaseline = 'middle' // 文字垂直居中
// 定义初始x坐标
const currentX = 400 // 初始的X坐标
// 绘制第一行文字
// ctx.fillText(this.paramData, currentX, 80) // 在 y=50 上绘制
// // 获取第一行文字的宽度
// currentX += ctx.measureText('第一行文字').width + 100 // 计算下一个文字的x坐标
// // 绘制第二行文字
ctx.fillText('自定义工具中添加的文字', currentX, 50) // 第二行文字
// 导出新的图片数据 URL
var newUrl = canvas.toDataURL('image/png')
// 创建下载链接
var $a = document.createElement('a')
var type = 'png'
$a.download = 'echarts' + '.' + type
$a.target = '_blank'
$a.href = newUrl
// 触发下载
if (typeof MouseEvent === 'function') {
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: false
})
$a.dispatchEvent(evt)
} else {
var html = '' +
'<body style="margin:0;">' +
'<img src="' + newUrl + '" style="max-width:100%;" title="' + 'echarts' + '" />' +
'</body>'
var tab = window.open()
tab.document.write(html)
}
}
},下方为echats的官方文档
https://echarts.apache.org/zh/option.html#toolbox.feature.saveAsImage
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
