vue實現(xiàn)表格動態(tài)嵌入折線圖的繪制代碼

更新時間：2023年10月26日 09:32:49 作者：櫻花落幕的商店

這篇文章給大家介紹了vue實現(xiàn)表格動態(tài)嵌入折線圖的繪制方法,文中有詳細(xì)完整的代碼示例攻大家參考,對大家的學(xué)習(xí)或工作有一定的參考價值,需要的朋友可以參考下

demo效果：

這里的折線是使用g6圖表繪制antv/g6

首先下載 npm install @antv/g6 --save
然后給需要畫線的盒子一個id，以便獲取
還要計算出這個canvas盒子在表格的位置
然后根據(jù)表格數(shù)據(jù)的length來生成點位
然后最后用g6把點位連接起來

完整代碼``

<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="低分表現(xiàn)" 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="高分表現(xiàn)" 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="分?jǐn)?shù)" width="79px" />
					</el-table>
				</div>
			</div>

js部分

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()
		})
	})

到此這篇關(guān)于vue實現(xiàn)表格動態(tài)嵌入折線圖的繪制代碼的文章就介紹到這了,更多相關(guān)vue表格動態(tài)嵌入折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: