Skip to content

Z
zh_zcb-ems
Commit 03558732 authored by wu.hui's avatar wu.hui
Browse files
Options

feat: 添加小数点

parent 3a9ce1ba
Hide whitespace changes
Inline Side-by-side
Showing with 300 additions and 289 deletions
src/css/stat-bar.css
View file @ 03558732
@font-face {
font-family: "DigifaceWide";
src: url("../font/DIGIFACEWIDE REGULAR.TTF") format("truetype");
font-family: 'DigifaceWide';
src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype');
/* Safari, Android, iOS */
}
.stat-bar {
......@@ -38,7 +38,7 @@
.stat-bar .stat-item .tit {
font-size: 20px;
color: #52ccff;
font-family: "Source Han Sans CN";
font-family: 'Source Han Sans CN';
}
.stat-bar .stat-item .scroll-box {
display: -webkit-box;
......@@ -46,7 +46,6 @@
display: -ms-flexbox;
display: flex;
margin-left: 10px;
min-width: 215px;
}
.stat-bar .stat-item .scroll-num {
width: 39px;
......@@ -55,15 +54,23 @@
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: "DigifaceWide";
font-family: 'DigifaceWide';
border-radius: 3px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=") no-repeat 0 0;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=') no-repeat 0 0;
background-size: cover;
overflow: hidden;
margin-right: 4px;
}
.stat-bar .stat-item .dot {
background-color: #01fff6;
width: 6px;
height: 6px;
border-radius: 100%;
margin-top: 36px;
margin-right: 4px;
}
.stat-bar .stat-item .suffix {
font-size: 16px;
color: #758094;
font-family: "Source Han Sans CN";
font-family: 'Source Han Sans CN';
}
src/js/index.js
View file @ 03558732
const ua = navigator.userAgent.toLowerCase();
const testUA = (regexp) => regexp.test(ua);
const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
const isWeChat = testUA(/micromessenger/g);
const ua = navigator.userAgent.toLowerCase()
const testUA = (regexp) => regexp.test(ua)
const isSafari = testUA(/safari/g) && !testUA(/chrome/g)
const isWeChat = testUA(/micromessenger/g)
// 用电量、上送电量
const echart1Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
date: ['8/17', '8/18', '8/19', '8/20', '8/21', '8/22', '8/23'],
line1: [200, 190, 250, 100, 90, 100, 250],
line2: [100, 90, 200, 80, 60, 50, 200],
};
}
// 楼层负荷、充电桩负荷
const echart2Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
date: ['8/17', '8/18', '8/19', '8/20', '8/21', '8/22', '8/23'],
line1: [0.02, 0.3, 0.5, 1, 0.2, 0.3, 0.5],
line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8],
};
}
// 负荷预测、负荷功率
const echart3Data = {
date: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
],
line1: [
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 1, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03,
0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.1,
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 1, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03,
0.02, 0.05, 0.02, 0.03, 0.1,
],
line2: [
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 1, 0.02, 0.02, 0.03, 0.05, 0.05,
0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 1, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.02,
0.02, 0.03, 0.05, 0.05, 0.02,
],
};
}
// 光伏发电量、碳减排量
const echart4Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
date: ['8/17', '8/18', '8/19', '8/20', '8/21', '8/22', '8/23'],
line1: [0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.01],
line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02],
};
}
// AC/DC、储能、光伏、负荷
const echart5Data = {
date: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
],
line1: [
100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100,
190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100,
100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100,
],
line2: [
200, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 500,
200, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 1000, 100, 250,
500,
],
line3: [
300, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 400,
300, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 1000, 100, 250,
400,
],
line4: [
400, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 300,
400, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 1000, 100, 250,
300,
],
};
}
// 光伏预测、光伏功率
const echart6Data = {
date: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
],
line1: [
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
0.03, 0.02, 0.02, 0.03, 0.05, 1, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.05,
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 1, 0.02, 0.03,
0.02, 0.05, 0.02, 0.03, 0.05,
],
line2: [
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05,
0.05, 0.02, 0.03, 0.02, 0.05, 1, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.05,
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.05, 1, 0.03, 0.02,
0.02, 0.03, 0.05, 0.05, 0.05,
],
};
}
// 顶部滚动数字数据
const scrollNumData = {
beforeNumArr: ["00000", "00000", "00000", "00000"],
afterNumArr: ["35345", "83460", "36765", "36465"],
};
beforeNumArr: ["000.00", "000.0", "0000", "00000"],
afterNumArr: ["003.45", "846.0", "0065", "36465"],
}
// 中间球体数据
const ballData = [11, 22, 33, 44, 55, 66];
const ballData = [11, 22, 33, 44, 55, 66]
// 底部环形数据
const ringData = [11, 22, 33, 44];
const ringData = [11, 22, 33, 44]
/**
* echartjs 曲线图通用配置
......@@ -167,7 +167,7 @@ const ringData = [11, 22, 33, 44];
* @param {type: array, desc: y轴数据 } yData
* */
const lineChartOption = (xData, yData, interval) => {
const series = [];
const series = []
yData.forEach((item) => {
series.push({
data: item.data,
......@@ -186,184 +186,186 @@ const lineChartOption = (xData, yData, interval) => {
]),
}
: null,
type: "line",
type: 'line',
smooth: true,
symbol: "none",
});
});
symbol: 'none',
})
})
return {
tooltip: {
trigger: "axis",
trigger: 'axis',
},
grid: {
top: "5%",
bottom: "15%",
right: "5%",
top: '5%',
bottom: '15%',
right: '5%',
},
xAxis: {
data: xData,
type: "category",
type: 'category',
axisLine: { show: false },
axisTick: { show: false },
splitLine: false,
boundaryGap: false,
axisLabel: {
color: "#7c90c8",
color: '#7c90c8',
fontSize: 10,
margin: 15,
interval,
},
},
yAxis: {
type: "value",
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
splitLine: false,
axisLabel: {
color: "#7c90c8",
color: '#7c90c8',
fontSize: 10,
margin: 15,
},
},
series,
};
};
}
}
// 创建多组数字
function createMultiSrollNum(numArr) {
const scrollBox = document.getElementsByClassName("scroll-box");
const scrollBox = document.getElementsByClassName('scroll-box')
for (let i = 0; i < scrollBox.length; i++) {
const scrollNode = scrollBox[i];
const childNumArr = numArr[i].split("");
const docFrag = document.createDocumentFragment();
const scrollNode = scrollBox[i]
const childNumArr = numArr[i].split('')
const docFrag = document.createDocumentFragment()
childNumArr.forEach((num, i) => {
docFrag.appendChild(createSrollNum(num));
});
scrollNode.appendChild(docFrag);
docFrag.appendChild(createSrollNum(num))
})
scrollNode.appendChild(docFrag)
}
}
// 创建单个数字
function createSrollNum(num) {
const scrollNumNode = document.createElement("div");
scrollNumNode.className = "scroll-num";
scrollNumNode.innerHTML = "<ul><li>" + num + "</li></ul>";
return scrollNumNode;
const scrollNumNode = document.createElement('div')
if (num === '.') {
scrollNumNode.className = 'dot'
} else {
scrollNumNode.className = 'scroll-num'
scrollNumNode.innerHTML = '<ul><li>' + num + '</li></ul>'
}
return scrollNumNode
}
function getIntervalNumArr(start, end, reduce) {
const arr = [];
const arr = []
if (reduce) {
for (let i = end; i > start; i--) {
arr.push(i);
arr.push(i)
}
} else {
for (let i = start; i < end; i++) {
arr.push(i);
arr.push(i)
}
}
return arr;
return arr
}
function repeatArr(a, m) {
let j = [];
let j = []
for (let i = 0; i < m; i++) {
j = j.concat(a);
j = j.concat(a)
}
return j;
return j
}
// 创建多组数字动画
function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
TWEEN.removeAll();
const scrollBox = document.getElementsByClassName("scroll-box");
console.log(beforeNumArr, afterNumArr);
const arr = [];
TWEEN.removeAll()
const scrollBox = document.getElementsByClassName('scroll-box')
const arr = []
for (let i = 0; i < scrollBox.length; i++) {
const scrollNode = scrollBox[i];
const beforeNum = beforeNumArr[i];
const afterNum = afterNumArr[i];
const isUp = Number(afterNum) - Number(beforeNum) >= 0;
const beforeChildNumArr = beforeNum.split("");
const afterChildNumArr = afterNum.split("");
const scrollNum = scrollNode.childNodes;
let delay = 0;
const staticDuration = 6000;
let zeroBeforeIndex = 0; // 是否以0开头 标志位
let zeroAfterIndex = 0; // 是否以0开头 标志位
let someNumberIndex = 0; // 前面有几位数字相同
let stopSomeNumber = false; // 停止计算前面有几位数字相同
const scrollNode = scrollBox[i]
const beforeNum = beforeNumArr[i]
const afterNum = afterNumArr[i]
const isUp = Number(afterNum) - Number(beforeNum) >= 0
const beforeChildNumArr = beforeNum.split('')
const afterChildNumArr = afterNum.split('')
const scrollNum = scrollNode.childNodes
let delay = 0
const staticDuration = 6000
let zeroBeforeIndex = 0 // 是否以0开头 标志位
let zeroAfterIndex = 0 // 是否以0开头 标志位
let someNumberIndex = 0 // 前面有几位数字相同
let stopSomeNumber = false // 停止计算前面有几位数字相同
const digitIndex = beforeChildNumArr.findIndex((ele) => ele === '.') // 小数点
for (let j = 0; j < beforeChildNumArr.length; j++) {
const num = +beforeChildNumArr[j];
const num2 = +afterChildNumArr[j];
if (beforeChildNumArr[j] === '.') {
continue
}
const num = +beforeChildNumArr[j]
const num2 = +afterChildNumArr[j]
// 算beforeNum前面的0
let zeroBeforeFlag = false;
let zeroBeforeFlag = false
if (num === 0 && zeroBeforeIndex === j) {
zeroBeforeFlag = true;
zeroBeforeIndex++;
if ((digitIndex > -1 && j < digitIndex - 1) || digitIndex === -1) {
zeroBeforeFlag = true
zeroBeforeIndex++
}
}
// 算afterNum前面的0
let zeroAfterFlag = false;
let zeroAfterFlag = false
if (num2 === 0 && zeroAfterIndex === j) {
zeroAfterFlag = true;
zeroAfterIndex++;
if ((digitIndex > -1 && j < digitIndex - 1) || digitIndex === -1) {
zeroAfterFlag = true
zeroAfterIndex++
}
}
// 前面有几位数字相同
if (num === num2 && !stopSomeNumber) {
someNumberIndex++;
someNumberIndex++
} else {
stopSomeNumber = true;
stopSomeNumber = true
}
let numberArr;
let repeatNum;
let numberArr
let repeatNum
if (isUp) {
if (num2 > num) {
numberArr = getIntervalNumArr(num, num2);
repeatNum = getIntervalNumArr(num2, 10).concat(
getIntervalNumArr(0, num2)
);
numberArr = getIntervalNumArr(num, num2)
repeatNum = getIntervalNumArr(num2, 10).concat(getIntervalNumArr(0, num2))
} else {
numberArr = getIntervalNumArr(num2, num, true);
repeatNum = getIntervalNumArr(0, num2, true)
.concat([0])
.concat(getIntervalNumArr(num2, 9, true));
numberArr = getIntervalNumArr(num2, num, true)
repeatNum = getIntervalNumArr(0, num2, true).concat([0]).concat(getIntervalNumArr(num2, 9, true))
}
numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex));
numberArr.push(num2);
numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex))
numberArr.push(num2)
} else {
if (num2 < num) {
numberArr = getIntervalNumArr(num2, num, true);
repeatNum = getIntervalNumArr(0, num2, true)
.concat([0])
.concat(getIntervalNumArr(num2, 9, true));
numberArr = getIntervalNumArr(num2, num, true)
repeatNum = getIntervalNumArr(0, num2, true).concat([0]).concat(getIntervalNumArr(num2, 9, true))
} else {
numberArr = getIntervalNumArr(num, num2);
repeatNum = getIntervalNumArr(num2, 10).concat(
getIntervalNumArr(0, num2)
);
numberArr = getIntervalNumArr(num, num2)
repeatNum = getIntervalNumArr(num2, 10).concat(getIntervalNumArr(0, num2))
}
numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex));
numberArr.push(num2);
numberArr.reverse();
numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex))
numberArr.push(num2)
numberArr.reverse()
}
const ulNode = scrollNum[j].childNodes[0];
ulNode.innerHTML = numberArr
.map((ele) => "<li>" + ele + "</li>")
.join("");
const ulNode = scrollNum[j].childNodes[0]
ulNode.innerHTML = numberArr.map((ele) => '<li>' + ele + '</li>').join('')
const last = (1 / numberArr.length - 1) * 100;
const start = isUp ? 0 : last;
const lastDelay = delay + staticDuration * 0.03;
const opacityBefore = zeroBeforeFlag ? 0 : 1;
const last = (1 / numberArr.length - 1) * 100
const start = isUp ? 0 : last
const lastDelay = delay + staticDuration * 0.03
const opacityBefore = zeroBeforeFlag ? 0 : 1
arr.push({
start,
end: isUp ? last : 0,
......@@ -372,192 +374,186 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
opacityAfter: zeroAfterFlag ? 0 : 1,
duration: staticDuration - lastDelay,
ulNode,
});
delay = lastDelay;
ulNode.setAttribute(
"style",
"transform: translateY(" + start + "%);opacity:" + opacityBefore
);
})
delay = lastDelay
ulNode.setAttribute('style', 'transform: translateY(' + start + '%);opacity:' + opacityBefore)
}
}
arr.forEach((sObject) => {
const { start, end, ulNode, delay, duration, opacityBefore, opacityAfter } =
sObject;
const { start, end, ulNode, delay, duration, opacityBefore, opacityAfter } = sObject
new TWEEN.Tween({ y: start, opacity: opacityBefore })
.to({ y: end, opacity: opacityAfter }, duration)
.delay(delay)
.easing(TWEEN.Easing.Quintic.Out)
.onUpdate((object) => {
ulNode.setAttribute(
"style",
"transform: translateY(" + object.y + "%);opacity:" + object.opacity
);
ulNode.setAttribute('style', 'transform: translateY(' + object.y + '%);opacity:' + object.opacity)
})
.start();
});
.start()
})
animate();
animate()
}
function createRandom() {
const arr = [];
const arr = []
for (let i = 0; i < 4; i++) {
let str = "";
let str = ''
for (let j = 0; j < 5; j++) {
const num = Math.floor(Math.random() * 10) + "";
str += num;
const num = Math.floor(Math.random() * 10) + ''
str += num
}
arr.push(str);
arr.push(str)
}
return arr;
return arr
}
function animate(time) {
let id = requestAnimationFrame(animate);
var result = TWEEN.update(time);
if (!result) cancelAnimationFrame(id);
let id = requestAnimationFrame(animate)
var result = TWEEN.update(time)
if (!result) cancelAnimationFrame(id)
}
// 设置圆球数据
function setBallData(list) {
list.forEach((_, idx) => {
document.querySelector(".ball-l-" + (idx + 1)).innerHTML = list[idx];
});
document.querySelector('.ball-l-' + (idx + 1)).innerHTML = list[idx]
})
}
// 设置环形数据
function setRingData(list) {
list.forEach((_, idx) => {
document.querySelector(".s-ring-" + (idx + 1)).innerHTML = list[idx];
});
document.querySelector('.s-ring-' + (idx + 1)).innerHTML = list[idx]
})
}
const leftLineChart = () => {
// echart渲染
const lineChart1 = echarts.init(document.getElementById("line_chart_1"));
const lineChart1 = echarts.init(document.getElementById('line_chart_1'))
lineChart1.setOption(
lineChartOption(echart1Data.date, [
{
data: echart1Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
color: '#4a76cf',
areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
},
{
data: echart1Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
color: '#2dc9e3',
areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
},
])
);
)
const lineChart2 = echarts.init(document.getElementById("line_chart_2"));
const lineChart2 = echarts.init(document.getElementById('line_chart_2'))
lineChart2.setOption(
lineChartOption(echart2Data.date, [
{
data: echart2Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
color: '#4a76cf',
areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
},
{
data: echart2Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
color: '#2dc9e3',
areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
},
])
);
)
const lineChart3 = echarts.init(document.getElementById("line_chart_3"));
const lineChart3 = echarts.init(document.getElementById('line_chart_3'))
lineChart3.setOption(
lineChartOption(
echart3Data.date,
[
{
data: echart3Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
color: '#4a76cf',
areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
},
{
data: echart3Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
color: '#2dc9e3',
areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
},
],
3
)
);
};
)
}
const rightLineChart = () => {
const lineChart4 = echarts.init(document.getElementById("line_chart_4"));
const lineChart4 = echarts.init(document.getElementById('line_chart_4'))
lineChart4.setOption(
lineChartOption(echart4Data.date, [
{
data: echart4Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
color: '#4a76cf',
areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
},
{
data: echart4Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
color: '#2dc9e3',
areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
},
])
);
)
const lineChart5 = echarts.init(document.getElementById("line_chart_5"));
const lineChart5 = echarts.init(document.getElementById('line_chart_5'))
lineChart5.setOption(
lineChartOption(
echart5Data.date,
[
{
data: echart5Data.line1,
color: "#f1ec41",
color: '#f1ec41',
},
{
data: echart5Data.line2,
color: "#c49ffe",
color: '#c49ffe',
},
{
data: echart5Data.line3,
color: "#4a76cf",
color: '#4a76cf',
},
{
data: echart5Data.line4,
color: "#2dc9e3",
color: '#2dc9e3',
},
],
3
)
);
)
const lineChart6 = echarts.init(document.getElementById("line_chart_6"));
const lineChart6 = echarts.init(document.getElementById('line_chart_6'))
lineChart6.setOption(
lineChartOption(
echart6Data.date,
[
{
data: echart6Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
color: '#4a76cf',
areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
},
{
data: echart6Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
color: '#2dc9e3',
areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
},
],
3
)
);
};
)
}
window.onload = () => {
/***********************************顶部数字滚动****************************************/
// 初始化
createMultiSrollNum(scrollNumData.beforeNumArr);
createMultiSrollNum(scrollNumData.beforeNumArr)
// 添加动画
addMultiDigitAnimate(scrollNumData.beforeNumArr, scrollNumData.afterNumArr);
addMultiDigitAnimate(scrollNumData.beforeNumArr, scrollNumData.afterNumArr)
// 测试，点击第一列数字
// document.getElementsByClassName('scroll-box')[0].onclick = function () {
......@@ -568,14 +564,14 @@ window.onload = () => {
// }
/***********************************左侧chart线条****************************************/
leftLineChart();
leftLineChart()
/***********************************右侧chart线条****************************************/
rightLineChart();
rightLineChart()
/***********************************中间球体****************************************/
// 球体数据
setBallData(ballData);
setBallData(ballData)
/***********************************底部环形****************************************/
// 环形数据
setRingData(ringData);
};
setRingData(ringData)
}
src/less/stat-bar.less
View file @ 03558732
@font-face {
font-family: "DigifaceWide";
src: url("../font/DIGIFACEWIDE REGULAR.TTF") format("truetype"); /* Safari, Android, iOS */
font-family: 'DigifaceWide';
src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype'); /* Safari, Android, iOS */
}
.stat-bar {
......@@ -27,12 +27,12 @@
.tit {
font-size: 20px;
color: #52ccff;
font-family: "Source Han Sans CN";
font-family: 'Source Han Sans CN';
}
.scroll-box {
display: flex;
margin-left: 10px;
min-width: 215px;
// min-width: 215px;
}
.scroll-num {
width: 39px;
......@@ -41,19 +41,27 @@
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: "DigifaceWide";
font-family: 'DigifaceWide';
border-radius: 3px;
//background: url('../images/digital-bg.png') no-repeat 0 0;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=")
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=')
no-repeat 0 0;
background-size: cover;
overflow: hidden;
margin-right: 4px;
}
.dot {
background-color: #01fff6;
width: 6px;
height: 6px;
border-radius: 100%;
margin-top: 36px;
margin-right: 4px;
}
.suffix {
font-size: 16px;
color: #758094;
font-family: "Source Han Sans CN";
font-family: 'Source Han Sans CN';
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment