vue3纵向表格走势图表

案例需求：类似彩票开奖历史结果走势

实现思路：表格作为定位范围，开奖结果为标注节点以表格为父节点获取标注节点所在表格的定位坐标，数据上下相邻的两个标注节点为一个绘线图.

以下为部分案例代码，仅供参考

注意：table 必须是relative定位

<template>
    <!--历史结果-->
    <div class="open-result-container">
        <table ref="tableContainer" class="base-table">
            <colgroup>
                 <col width="30" height="30">
                 <col width="170" height="30">
                 <col 
                 v-for="(item,index) in 100" 
                     :key="index" 
                     width="30"
                     height="30"
                     :style="tableColStyle(index, 10)"
            </colgroup>
            <thead>
                 <tr>
                      <th>期数</th>
                      <th>开奖号码</th>
                      <template v-for="(item,index) in 10" :key="index">
                          <th v-for="(num,inde) in 10" :key="inde">{{inde + 1}}</th>
                      </template>
                 </tr>
            </thead>
            <tbody>
                 <tr v-for="(item,ind) in historyResultList.bodyList" :key="item.preIssue">
                      <td>{{item.preIssue}}</td>
                      <td>{{item.preDrawCode}}</td>
                      <template v-for="(missing,index) in item.subBodyList" :key="index">
                           <td v-for="(num,inde) in missing.missing" :key="inde">
                                <！-- 这里num数据大于0的是标注开奖项 -->
                                <span v-if="num > 0" :class="['mark',`mark_${ind}_${index}`]" :style="{background: colorList[index]}">{{inde + 1}}</span>
                                <span v-else>{{Math.abs(num)}}</span>
                           </td>
                      </template>
                      ...
                 </tr>
            </tbody>
            <div class="draw-line">
                 <template
                       v-for="(item,index) in startAndEndPositionArr" 
                       :key="index">
                        <!-- 多组走势图绘制 -->
                       <draw-line-canvas 
                          v-for="(colArr,inde) in item" 
                          :key="inde"
                          :startAndEndPosition="colArr" 
                          :lineColor="colorList[index][1]" />
                 </template>
             </div>
        </table>
    </div>
</template>
<script setup>
...
import drawLineCanvas from "../components/drawLineCanvas.vue"

// table 节点
const tableContainer = ref(null)

// 标点坐标系存储数据 同一表格多组走势图则保存成多维数组
const startAndEndPositionArr = ref([])

// 数据
const historyResultList = ref([])

// 计算并记录标点坐标系
const calcPosition = () => {
    if (!historyResult.value.bodyList || !historyResult.value.bodyList.length) {
        startAndEndPositionArr.value = []
        return
    }
    // 此处以 10 个走势图为例
    startAndEndPositionArr.value = [...Array.from(new Array(10)).map(() => { return [] })]
    let lastXYArr = []
    for(let index in historyResult.value.bodyList) {
        let subBodyList = historyResult.value.bodyList[index].subBodyList
        for(let inde in subBodyList) {
            let oDom = document.querySelector(`.mark_${index}_${inde}`);
            if (!oDom) continue
            let width = oDom.offsetWidth / 2
            let height = oDom.offsetHeight / 2
            // 获取号码元素相对table标签相对X Y
            let xyArr = [
                oDom.getBoundingClientRect().left - tableContainer.value.getBoundingClientRect().left + width,
                oDom.getBoundingClientRect().top - tableContainer.value.getBoundingClientRect().top + height
            ]
            if (!lastXYArr[inde]) {
                lastXYArr[inde] = xyArr
                continue
            } else {
                let nextXYArr = xyArr
                startAndEndPositionArr.value[inde].push([lastXYArr[inde],nextXYArr])
                lastXYArr[inde] = xyArr
            }
        }
    }
}

// 色调表
const colorList = reactive([
    ["#fcf8f3", "#fba75e"], // 0 底色，1 主题色
    ["#f0f9fc", "#1fa6e8"],
    ["#f0fcf0", "#08bf02"],
    ["#f0f1fc", "#8585fb"],
    ["#f0fcf7", "#46bd95"],
    ["#fcf0f5", "#e26bab"],
    ["#fcf8f3", "#f2b653"],
    ["#f0f1fc", "#628ef3"],
    ["#f0fcf0", "#5ec642"],
    ["#fff4f4", "#f66d6d"],
])

// 查询数据
const getData = () => {
    queryApi().then(res => {
        historyResultList = res.data
        // 这里返回的数据结构如下 仅供参考
        /** res.data = {
            bodyList: [
                {
                    preDrawCode: "",
                    preIssue: "",
                    subBodyList: [
                        {
                            missing: [-1,-3,1,....],
                            ...
                        }
                    ]
                }
            ]
        } */
        
        nextTick(() => {
            calcPosition()
        })
    })
}

onMounted(() => {
    getData()
})
</script>

绘制线条组件 drawLineCanvas.vue

<template>
<!-- canvas 画走势两点直线 -->
    <canvas ref="myCanvas"></canvas>
</template>

<script setup>
import { nextTick, ref, watch, computed } from "vue"

const props = defineProps({
    startAndEndPosition: {
        type: Array,
        default: () => {
            return [
                [],// 前标点坐标[X,y]
                [] // 后标点坐标[X,Y]
            ]
        }
    },
    lineColor: {
        type: String,
        default: "#1fa6e8"
    },
    zIndex: {
        type: Number,
        default: 1
    },
    lineWidth: {
        type: Number,
        default: 1
    }
})

const startAndEndPosition = computed(() => {
    return props.startAndEndPosition
})

const myCanvas = ref(null)
const myCanvasContext = ref(null)

watch(startAndEndPosition,() => {
    if (myCanvasContext.value) {
        drawMap(startAndEndPosition.value)
    } else{
        nextTick(() => {
            if (startAndEndPosition.value[0][0] !== undefined) {
                drawMap(startAndEndPosition.value)
            }
        })
    }
},{
    immediate: true,
    deep: true
})

// 绘制线条
const drawMap = (item) => {
    let width = item[1][0] - item[0][0]
    let height = item[1][1] - item[0][1]
    let moveToArrr = []
    let lineToArr = []
    let left = 0
    let top = item[0][1]
    if (width === 0) {
        // 垂直向下划线 
        width = props.lineWidth // 宽带加宽 垂直居中绘图 避免线条变细
        left = item[0][0] - (props.lineWidth / 2)
        moveToArrr = [1,0]
        lineToArr = [1,height]
    } else if (width < 0) {
        // 从右上角往左下角划线
        width *= -1
        left = item[1][0]
        moveToArrr = [width,0]
        lineToArr = [0,height]
    } else {
        // 从左上角往右下角划线
        left = item[0][0]
        moveToArrr = [0,0]
        lineToArr = [width,height]
    }
    myCanvas.value.width = width
    myCanvas.value.height = height
    myCanvas.value.style.position = "absolute"
    myCanvas.value.style.zIndex = props.zIndex
    myCanvas.value.style.left = left + "px"
    myCanvas.value.style.top = top + "px"
    myCanvasContext.value = myCanvas.value.getContext('2d');
    myCanvasContext.value.lineWidth = props.lineWidth
    myCanvasContext.value.strokeStyle = props.lineColor
    myCanvasContext.value.moveTo(...moveToArrr)
    myCanvasContext.value.lineTo(...lineToArr)
    myCanvasContext.value.stroke()
}
</script>

效果图：