vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue表格动态嵌入折线图

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

作者:樱花落幕的商店

这篇文章给大家介绍了vue实现表格动态嵌入折线图的绘制方法,文中有详细完整的代码示例攻大家参考,对大家的学习或工作有一定的参考价值,需要的朋友可以参考下

demo效果:

这里的折线是使用g6图表绘制antv/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="低分表现" 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>

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

到此这篇关于vue实现表格动态嵌入折线图的绘制代码的文章就介绍到这了,更多相关vue表格动态嵌入折线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文