uniapp(vue)：js实现双色球开奖走势图带连线

参考文章：JS实现彩票开奖走势图
默认红球：

滑动到最右侧篮球连线：

<template>
	<view class="index">
		<view class="navTitle">彩票走势图</view>
		<view class="d-f">
			<view class="nav">
				<view class="item item1">期号</view>
				<view class="item" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
			</view>
			<view class="trendList">
				<view class="trendNum">
					<view class="item" v-for="(item,index) in trendNumList" :key="index">
						<text v-for="(val,i) in item.tag1">{{val}}</text>
						<text v-for="(val,s) in item.tag2">{{val}}</text>
					</view>
				</view>
				<view class="d-f">
					<view class="left">
						<view class="trendVal" v-for="(item,index) in trendList" :key="index">
							<view class="item" v-for="(val,i) in item.data1" :key="i">
								<text :class="{active:val.active == 1}">{{ val.num }}</text>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="trendVal" v-for="(item,index) in trendList" :key="index">
							<view class="item" v-for="(val,i) in item.data2" :key="i">
								<text :class="{lableNum:val.active == 1}">{{ val.num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { fnLineChart } from "./fn.ts";
export default {
	data() {
		return {
			// 左侧期号 
			navList:[
				{name:'10001'},
				{name:'10002'},
				{name:'10003'},
				{name:'出现总数'},
				{name:'平均遗漏'},
				{name:'最大遗漏'},
				{name:'最大连出'},
				{name:'模拟选号'},
			],
			// 头部 tag1:红色33颗球，tag2:蓝色16颗球
			trendNumList:[
				{
					tag1:[1,2, /* ... */ 33],
					tag2:[1,2,/* ... */,16]
				}
			],
			// data1:对应红色33颗开奖号码，如果某个号码中奖：active = 1
			// data2:对应蓝色16颗开奖号码，如果某个号码中奖，需要连线设置：active = 1
			trendList:[
				{
					data1:[
						{num:1,active:0,},
						/*
						中间数据省略
						*/
					   {num:32,active:1,}
						{num:33,active:1,}
					],
					data2:[
						{num:1,active:1,},
						{num:2,active:0,},
						/*
						中间数据省略
						*/
						{num:10,active:0,},
					]
				},
			]
		}
	},
	onLoad() {
		this.$nextTick(()=>{
			let eleDots = document.querySelectorAll(".lableNum");
			console.log(eleDots)
			fnLineChart(eleDots);
		})
	},
}
</script>

// fn.ts
//画线函数
export const fnLineChart = function(eleDots: any) {
	eleDots.forEach((ele: any, index: number) => {
		const eleNext: any = eleDots[index - 1];
		if (!eleNext) {
			return;
		}
		let eleLine = ele.querySelector("i");
		
		
		if (!eleLine) {
			eleLine = document.createElement("i");
			eleLine.className = "line";
			ele.appendChild(eleLine);
		}
		// 记录坐标
		const boundThis = ele.getBoundingClientRect();
		// 下一个点的坐标
		const boundNext = eleNext.getBoundingClientRect();
		// 计算长度和旋转角度
		const x1 = boundThis.left,
			y1 = boundThis.top;
		const x2 = boundNext.left,
			y2 = boundNext.top;
		// 长度
		const distance = Math.sqrt(
			(x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1),
		);
		// 弧度
		const radius = Math.atan2(y2 - y1, x2 - x1);
		// 设置线条样式
		eleLine.style.width = distance + "px";
		eleLine.style.transform = `rotate(${radius}rad)`;
		eleLine.style.position='absolute';
		eleLine.style.left='50%';
		eleLine.style.top='50%';
		eleLine.style.height='2px';
		eleLine.style.boxSizing='border-box';
		eleLine.style.background='#CDC1A6';
		eleLine.style.transformOrigin='left center';
		eleLine.style.marginTop='-1px';
		eleLine.style.pointerEvents='none';
		eleLine.style.zindex='-1';
	});
};

<style lang="scss">
	.index{
		min-height: 200vh;
		.navTitle{
			height: 44px;
			line-height: 44px;
			text-align: center;
			font-size: 32rpx;
			color: #000;
		}
		.d-f{
			display: flex;
		}
		.nav {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			text-align: center;
			.item {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				color: #9a9a9a;
				border-right: 1rpx solid #E6E6E6;
				
			}
			.item:nth-child(2n-1) {
				background: #EFECE5;
			}
		
			.item:nth-child(2n) {
				background: #F9F7F3;
			}
			.item1{
				background: #F9F7F3!important;
			}
		}
		.trendList{
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			.trendNum{
				height: 50rpx;
				.item{
					uni-text{
						background: #efece5;
						display: inline-block;
						text-align: center;
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 22rpx;
						color: #9a9a9a;
						border-right: 1rpx solid #E6E6E6;
					}
				}
			}

			.trendVal{
				display: flex;
				.item{
					display: flex;
					align-items: center;
					justify-content: center;
					border-right: 1rpx solid #E6E6E6;
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					uni-text{
						text-align: center;
						font-size: 22rpx;
						color: #9a9a9a;
					}
				}
			}
			.trendVal:nth-child(2n-1) {
				background: #fff;
			}
			.trendVal:nth-child(2n) {
				background: #F9F7F3;
			}
			.trendVal:last-child{
				.item{
					border-bottom: 1rpx solid #E6E6E6;
				}
			}
		}
	}
	.active{
		background-color: #ed6e6e;
		border-radius: 50%;
		color: #fff!important;
		width: 32rpx!important;
		height: 32rpx!important;
		line-height: 32rpx!important;
	}
	.lableNum {
		background-color: #39f;
		position: relative;
		border-radius: 50%;
		color: #fff!important;
		width: 32rpx!important;
		height: 32rpx!important;
		line-height: 32rpx!important;
	}
</style>

以上就是项目源码。无需安装插件，可以直接放到uniapp或者vue中直接运行，数据结构可根据后台返回自己在做修改。