Vue3实现纵向表格走势图表：以彩票开奖历史结果为例

Vue3实现纵向表格走势图表：以彩票开奖历史结果为例

引用

CSDN

1.

https://blog.csdn.net/qq_21579949/article/details/141378047

在前端开发中，实现数据可视化图表是一个常见的需求。本文将介绍如何使用Vue3和Canvas实现一个纵向表格走势图表，以彩票开奖历史结果为例，展示如何通过技术手段将数据转化为直观的可视化效果。

实现思路

• 表格布局：使用HTML表格作为数据展示的基础容器，每个开奖号码作为一个单元格，通过CSS定位和尺寸设置确保表格结构的准确性。
• 数据处理：通过计算每个开奖号码在表格中的相对位置，获取其坐标信息，为后续绘制线条做准备。
• Canvas绘图：利用Canvas组件绘制连接相邻开奖号码的线条，通过颜色区分不同的走势，增强视觉效果。

核心代码实现

表格部分代码

<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>  

Canvas绘图组件代码

<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>  

效果展示

通过以上代码实现，可以得到一个美观且功能完善的纵向表格走势图表，能够直观地展示彩票开奖历史结果的走势情况。