修改

src/index.html

@@ -111,19 +111,19 @@
           <span>能源监测</span>
           <div class="center-title-bg"></div>
         </div>
-        <div class="center-content">
+        <div class="center-content" id="ball_list">
           <!--中间左侧统计-->
           <div class="box_1 justify-between">
             <div class="box-left">
               <span class="text-title">单平米能耗(kWh)</span>
               <div class="globe_1 text-globe">
-                <span class="text-num">88</span>
+                <span class="text-num ball-l-1">--</span>
               </div>
             </div>
             <div class="box-right">
               <span class="text-title">单平米碳排(kWh)</span>
               <div class="globe_2 text-globe">
-                <span class="text-num">100</span>
+                <span class="text-num ball-l-2">--</span>
               </div>
             </div>
           </div>
@@ -131,13 +131,13 @@
             <div class="box-left">
               <span class="text-title">充电桩功率(kW)</span>
               <div class="globe_1 text-globe">
-                <span class="text-num">88</span>
+                <span class="text-num ball-l-3">--</span>
               </div>
             </div>
             <div class="box-right">
               <span class="text-title">光伏功率(kW)</span>
               <div class="globe_2 text-globe">
-                <span class="text-num">100</span>
+                <span class="text-num ball-l-4">--</span>
               </div>
             </div>
           </div>
@@ -145,13 +145,13 @@
             <div class="box-left-bottom">
               <span class="text-title">负荷功率(kW)</span>
               <div class="globe_1 text-globe">
-                <span class="text-num">88</span>
+                <span class="text-num ball-l-5">--</span>
               </div>
             </div>
             <div class="box-right-bottom">
               <span class="text-title">联络线功率(kW)</span>
               <div class="globe_2 text-globe">
-                <span class="text-num">100</span>
+                <span class="text-num ball-l-6">--</span>
               </div>
             </div>
           </div>
@@ -171,7 +171,7 @@
                 </div>
                 <div class="content">
                   <div class="title">峰谷差</div>
-                  <div class="percentage">88<span>%</span></div>
+                  <div class="percentage s-ring-1">--<span>%</span></div>
                 </div>
               </li>
               <li>
@@ -180,7 +180,7 @@
                 </div>
                 <div class="content">
                   <div class="title">消纳率</div>
-                  <div class="percentage">100<span>%</span></div>
+                  <div class="percentage s-ring-2">--<span>%</span></div>
                 </div>
               </li>
               <li>
@@ -189,7 +189,7 @@
                 </div>
                 <div class="content">
                   <div class="title">碳排系数</div>
-                  <div class="percentage">98<span>%</span></div>
+                  <div class="percentage s-ring-3">--<span>%</span></div>
                 </div>
               </li>
               <li>
@@ -198,7 +198,7 @@
                 </div>
                 <div class="content">
                   <div class="title">系统效率</div>
-                  <div class="percentage">88<span>%</span></div>
+                  <div class="percentage s-ring-4">--<span>%</span></div>
                 </div>
               </li>
             </ul>

src/js/index.js

-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,
@@ -54,43 +54,43 @@ const echart3Data = {
     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,
@@ -108,36 +108,36 @@ const echart5Data = {
     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,
@@ -147,7 +147,19 @@ const echart6Data = {
     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"],
+};
+
+// 中间球体数据
+const ballData = [11, 22, 33, 44, 55, 66];
+
+// 底部环形数据
+const ringData = [11, 22, 33, 44];
 
 /**
  * echartjs 曲线图通用配置
@@ -155,7 +167,7 @@ const echart6Data = {
  * @param {type: array, desc: y轴数据 } yData
  * */
 const lineChartOption = (xData, yData, interval) => {
-  const series = []
+  const series = [];
   yData.forEach((item) => {
     series.push({
       data: item.data,
@@ -174,182 +186,184 @@ 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");
+  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");
+  console.log(beforeNumArr, afterNumArr);
+  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; // 停止计算前面有几位数字相同
     for (let j = 0; j < beforeChildNumArr.length; j++) {
-      const num = +beforeChildNumArr[j]
-      const num2 = +afterChildNumArr[j]
+      const num = +beforeChildNumArr[j];
+      const num2 = +afterChildNumArr[j];
 
       // 算beforeNum前面的0
-      let zeroBeforeFlag = false
+      let zeroBeforeFlag = false;
       if (num === 0 && zeroBeforeIndex === j) {
-        zeroBeforeFlag = true
-        zeroBeforeIndex++
+        zeroBeforeFlag = true;
+        zeroBeforeIndex++;
       }
 
       // 算afterNum前面的0
-      let zeroAfterFlag = false
+      let zeroAfterFlag = false;
       if (num2 === 0 && zeroAfterIndex === j) {
-        zeroAfterFlag = true
-        zeroAfterIndex++
+        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)
+          numberArr = getIntervalNumArr(num, num2);
           repeatNum = getIntervalNumArr(num2, 10).concat(
             getIntervalNumArr(0, num2)
-          )
+          );
         } else {
-          numberArr = getIntervalNumArr(num2, num, true)
+          numberArr = getIntervalNumArr(num2, num, true);
           repeatNum = getIntervalNumArr(0, num2, true)
             .concat([0])
-            .concat(getIntervalNumArr(num2, 9, true))
+            .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)
+          numberArr = getIntervalNumArr(num2, num, true);
           repeatNum = getIntervalNumArr(0, num2, true)
             .concat([0])
-            .concat(getIntervalNumArr(num2, 9, true))
+            .concat(getIntervalNumArr(num2, 9, true));
         } else {
-          numberArr = getIntervalNumArr(num, 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,
@@ -358,178 +372,192 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
         opacityAfter: zeroAfterFlag ? 0 : 1,
         duration: staticDuration - lastDelay,
         ulNode,
-      })
-      delay = lastDelay
+      });
+      delay = lastDelay;
       ulNode.setAttribute(
-        'style',
-        'transform: translateY(' + start + '%);opacity:' + opacityBefore
-      )
+        "style",
+        "transform: translateY(" + start + "%);opacity:" + opacityBefore
+      );
     }
   }
 
   arr.forEach((sObject) => {
     const { start, end, ulNode, delay, duration, opacityBefore, opacityAfter } =
-      sObject
+      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
-        )
+          "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);
 }
 
-window.onload = () => {
+// 设置圆球数据
+function setBallData(list) {
+  list.forEach((_, 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];
+  });
+}
+
+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 lineChart4 = echarts.init(document.getElementById('line_chart_4'))
+const rightLineChart = () => {
+  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
     )
-  )
-
-  // 数据统计数字滚动
-  let beforeNumArr = ['00000', '00000', '00000', '00000']
-  let afterNumArr = ['35345', '83460', '36765', '36465']
+  );
+};
 
+window.onload = () => {
+  /***********************************顶部数字滚动****************************************/
   // 初始化
-  createMultiSrollNum(beforeNumArr)
-
+  createMultiSrollNum(scrollNumData.beforeNumArr);
   // 添加动画
-  addMultiDigitAnimate(beforeNumArr, afterNumArr)
+  addMultiDigitAnimate(scrollNumData.beforeNumArr, scrollNumData.afterNumArr);
 
   // 测试，点击第一列数字
   // document.getElementsByClassName('scroll-box')[0].onclick = function () {
@@ -538,4 +566,16 @@ window.onload = () => {
   //   afterNumArr = numArr
   //   addMultiDigitAnimate(beforeNumArr, afterNumArr)
   // }
-}
+
+  /***********************************左侧chart线条****************************************/
+  leftLineChart();
+  /***********************************右侧chart线条****************************************/
+  rightLineChart();
+
+  /***********************************中间球体****************************************/
+  // 球体数据
+  setBallData(ballData);
+  /***********************************底部环形****************************************/
+  // 环形数据
+  setRingData(ringData);
+};