vue实现表格动态嵌入折线图的绘制代码
作者:樱花落幕的商店
这篇文章给大家介绍了vue实现表格动态嵌入折线图的绘制方法,文中有详细完整的代码示例攻大家参考,对大家的学习或工作有一定的参考价值,需要的朋友可以参考下
demo效果:
这里的折线是使用g6图表绘制antv/g6
- 首先下载 npm install @antv/g6 --save
- 然后给需要画线的盒子一个id,以便获取
- 还要计算出这个canvas盒子在表格的位置
- 然后根据表格数据的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="低分表现" 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表格动态嵌入折线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!