需求：如下图所示，需要固定头部legend信息

1.前期准备

echarts dom渲染容器

<div :id="'barchart' + id" class="charts" ref="barchart"></div>

2. echart 图表渲染
3. 取图表的echarts图片传给父组件

为什么使用setTimeout ：
原因是因为 防止 dom还没渲染完，echarts执行完了，会导致echarts空白的问题
myChart 为全局变量 是防止vue实时监听参数，导致浏览器卡顿或者崩溃

setTimeout(() => {
this.chartToBase64(myChart[this.id]).then((base64) => {const direction = yAxis[0]?.type == "value" ? "l" : "p"; //PDF方向const width = this.$refs.barchart.offsetWidth; //宽const height = this.$refs.barchart.offsetHeight; //高this.$emit("getBottomImag", { canvas: base64, width, height,direction })
})
},200)// 将图表转换为 base64 字符串
chartToBase64(chart) {return new Promise((resolve, reject) => {chart.on("finished", () => {resolve(chart.getDataURL({ backgroundColor: "#fff" }));});});
},

2.图片截取

1. 父组件中创建好所需dom

<!-- 截取top bottom 图表图片 -->
<img :src="workbookTopImg" ref="topimgRef" style="position: absolute; background: #fff" v-show="workbookTopImg" />
<img :src="workbookBottomImg" ref="bottomimgRef" style="position: absolute; background: #fff" v-show="workbookBottomImg" />
<canvas ref="canvastop" style="visibility: hidden"></canvas>
<canvas ref="canvasbottom" style="visibility: hidden"></canvas>

//截取图表指定位置大小
getBottomImag(data) {const { width, height, direction, canvas} = data;const { offsetWidth } = this.$refs.tempRef;//获取父组件的最外层div宽度//使导出的图表从最头开始document.documentElement.scrollTop = 0;document.body.scrollTop = 0;//SVG 裁剪// 使用base64data进行后续操作let imgSrc = base64data;let img = new Image();const _this = this;let top = "";img.onload = async () => {await _this.$nextTick();	const imgTopHeight = 80;//css 属性设定_this.$refs.topimgRef.style.width = `${width}px`;_this.$refs.topimgRef.style.height = `${imgTopHeight}px`;_this.$refs.topimgRef.style.top = "70px";_this.$refs.topimgRef.style.left = "10px";top = {canvas: img,sourceX: 0,sourceY: 0,desiredWidth: width,desiredHeight: imgTopHeight,type: "top",};_this.workbookTopImg = await _this.cutSvgImg(top);//用完图片后 释放缓存img.style.display = "none";document.body.removeChild(img);img = null;};img.src = imgSrc; // 设置源路径会开始加载图像document.body.appendChild(img);
},

3. 裁取图片

//裁剪svg图片
/*canvas:裁剪的svg图片sourceX :裁剪起点sourceY：裁剪终点desiredWidth：裁剪宽度desiredHeight：裁剪高度
返回结果：裁剪后的图片 base64码*/
async cutSvgImg({ canvas, sourceX, sourceY, desiredWidth, desiredHeight, type }) {// 创建一个新的 canvas 来存储裁剪结果let croppedCanvas = this.$refs["canvas" + type];croppedCanvas.width = desiredWidth;croppedCanvas.height = desiredHeight;let croppedCtx = croppedCanvas.getContext("2d");// 在裁剪 canvas 上绘制裁剪的图像部分croppedCtx.drawImage(canvas, sourceX, sourceY, desiredWidth, desiredHeight, 0, 0, desiredWidth, desiredHeight);const base64 = croppedCanvas.toDataURL("image/png");// 清除canvas内容croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);// 将裁剪结果转换为 data URLreturn base64;
},

3.关于drawImage参数

1. image: 要绘制的图像，可以是图片或者canvas对象。
2. sx: 图像剪切的起始X坐标。
3. sy: 图像剪切的起始Y坐标。
4. swidth: 图像剪切的宽度。
5. sheight: 图像剪切的高度。
6. x: 绘制图像的起始X坐标。
7. y: 绘制图像的起始Y坐标。
8. width: 绘制图像的宽度。
9. height: 绘制图像的高度。