参考文章：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中直接运行，数据结构可根据后台返回自己在做修改。