update linechart oilflow

src/components/boxes/OilFlow.vue

@@ -78,6 +78,18 @@ export default {
 				OT007: Array(24)
 					.fill(1)
 					.map((_) => randomInt()),
+				OT008: Array(24)
+					.fill(1)
+					.map((_) => randomInt()),
+				OT009: Array(24)
+					.fill(1)
+					.map((_) => randomInt()),
+				OT000: Array(24)
+					.fill(1)
+					.map((_) => randomInt()),
+				OT011: Array(24)
+					.fill(1)
+					.map((_) => randomInt()),
 			},
 		};
 	},

src/components/charts/LineChart.vue

@@ -3,7 +3,7 @@
   <div class="line-chart__wrapper">
     <div class="line-chart__custom-legend flex" v-if="legend.length">
       <!-- <span>产线1 - 产线5</span> -->
-      <ul style="" class="flex">
+      <ul style="" class="">
         <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
       </ul>
     </div>
@@ -96,9 +96,11 @@ export default {
         "#7138FF",
         "#F318D8",
         "#C0F318",
-        "#f77",
-        "#19f",
-        "#98f",
+        "#ff7777",
+        "#1199ff",
+        "#9988ff",
+        "#3388ff",
+        "#337788",
       ],
       data: [],
       legendtext: [
@@ -278,30 +280,32 @@ li {
 }
 
 ul {
+  // background: #0005;
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: flex-end;
   height: adjust(14px);
   white-space: pre-wrap;
   padding-bottom: 0;
   padding-left: adjust(6px);
-  background: #0005;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  column-gap: 6px;
+  // column-span: none;
+  justify-items: end;
+  align-items: end;
 }
 
 li {
-  text-align: right;
+  padding-left: adjust(1px);
   position: relative;
-  min-width: 40px;
-  background: #f003;
+  // background: #f003;
+  user-select: none;
 }
 
 .line-chart__custom-legend {
   position: absolute;
   top: adjust(-20px);
   right: 0;
-  font-size: adjust(6px);
+  font-size: adjust(5px);
   font-family: Ubuntu, sans-serif;
   padding: 0;
   // max-width: 100%;
@@ -313,10 +317,10 @@ li {
 li::before {
   content: "";
   position: absolute;
-  top: adjust(0px);
-  left: adjust(-6px);
-  width: adjust(6px);
-  height: adjust(6px);
+  top: adjust(.5px);
+  left: adjust(-5px);
+  width: adjust(5px);
+  height: adjust(5px);
   border-radius: adjust(1px);
   background: #eee6;
 }
@@ -354,6 +358,9 @@ li:nth-child(10)::before {
 li:nth-child(11)::before {
   background: #98f;
 }
+li:nth-child(12)::before {
+  background: #38f;
+}
 
 .line-chart__wrapper {
   position: relative;