vue实现表格动态嵌入折线图的绘制代码

<div style="width: 100%">
				<div class="table-img weidu">
					<div class="cnavasbox" id="cnavasbox" :style="{ height: `${canvasHeight}px` }"></div>
					<el-table :highlight-current-row="false" :data="tableData" style="width: 1091px" class="custom-table" :header-cell-style="headerCellStyle">
						<el-table-column prop="targetName" label="维度" width="126px" />
						<el-table-column prop="lowRemark" label="低分表现" width="205px">
							<template #default="scope">
								<div v-for="(item, index) in scope.row.lowRemark" :key="index" class="redcirclebox">
									<div class="redcircle"></div>
									<div class="redtitle">{{ item }}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="低分">
							<el-table-column label="10" width="46px"></el-table-column>
							<el-table-column label="20" width="46px"></el-table-column>
							<el-table-column label="30" width="46px"></el-table-column>
							<el-table-column label="40" width="46px"></el-table-column>
						</el-table-column>
						<el-table-column label="中分">
							<el-table-column label="50" width="46px"></el-table-column>
							<el-table-column label="60" width="46px"></el-table-column>
							<el-table-column label="70" width="46px"></el-table-column>
						</el-table-column>
						<el-table-column label="高分">
							<el-table-column label="80" width="46px"></el-table-column>
							<el-table-column label="90" width="46px"></el-table-column>
							<el-table-column label="100" width="62px"></el-table-column>
						</el-table-column>
						<el-table-column prop="tallRemark" label="高分表现" width="205px">
							<template #default="scope">
								<div v-for="(item, index) in scope.row.tallRemark" :key="index" class="redcirclebox">
									<div class="redcircle greencircle"></div>
									<div class="greentitle">{{ item }}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="score" label="分数" width="79px" />
					</el-table>
				</div>
			</div>

const headerCellStyle = ref({
	backgroundColor: '#ADC3E4 !important',
	color: '#1A1A1A',
	fontWeight: '500',
	fontSize: '26PX',
	textAlign: 'center',
	fontFamily: 'SourceHanSans',
	paddingLeft: '0px',
	paddingRight: '0px',
	height: '51px',
	
})
previewPdfBasic({ id: id }).then(res => {
		tableData.value = res
		tableData.value.forEach((item, index) => {
			item.id = index
		})
		dimensionatableData.value = res

		console.log(res, 'ressssssssssss')
		setTimeout(() => {
			const bb = document.querySelector('.el-table__body-wrapper')
			console.log(bb, '获取盒子1111111111')
			canvasHeight.value = bb.offsetHeight
			console.log(bb.offsetHeight)
			const canvas = document.querySelector('.cnavasbox')
			graphConfig.container = canvas
			graphConfig.width = canvas.offsetWidth
			graphConfig.height = bb.offsetHeight
			const rowsArr = document.querySelectorAll('.weidu .el-table__row')
			const rowArrHeight = []
			rowsArr.forEach(item => {
				rowArrHeight.push(item.offsetHeight)
			})
			console.log(rowArrHeight, 'rowArrHeight')
			tableData.value.forEach((item, index) => {
				if (item.score <= 90) {
					data.value.nodes[index] = {
						x: (item.score / 90) * 414,
						id: `dot${index}`,
						y: rowArrHeight.slice(0, index).reduce((total, num) => total + num, 0) + rowArrHeight[index] / 2,
					}
				} else {
					data.value.nodes[index] = {
						x: 414 + (item.score / 10) * 62,
						id: `dot${index}`,
						y: rowArrHeight.slice(0, index).reduce((total, num) => total + num, 0) + rowArrHeight[index] / 2,
					}
				}
			})
			data.value.nodes.forEach((item, index) => {
				if (index < data.value.nodes.length - 1) {
					data.value.edges.push({
						source: data.value.nodes[index].id,
						target: data.value.nodes[index + 1].id,
					})
				}
			})

			console.log(rowsArr, 'rowsArr')
			const graph = new G6.Graph(graphConfig)
			graph.data(data.value)
			graph.render()
		})
	})