done oil flow

src/components/boxes/OilFlow.vue

@@ -3,9 +3,9 @@
 	<Container usage="Charts">
 		<SubContainer title="油流量" icon="oil" padding="17px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart class="flex-1" :config="chartConfig" />
+				<LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" />
 				<div class="vertical-line"></div>
-				<LineChart class="flex-1" :config="chartConfig" />
+				<LineChart key="2" id="line-chart-2" class="flex-1" :config="chartConfig" />
 			</div>
 		</SubContainer>
 	</Container>

src/components/charts/LineChart.vue

@@ -11,7 +11,7 @@
 				<li>产线5</li>
 			</ul>
 		</div>
-		<div id="line-chart" style="width: 100%; height: 100%"></div>
+		<div :id="id" style="width: 100%; height: 100%"></div>
 	</div>
 </template>
 
@@ -42,6 +42,10 @@ echarts.use([
 export default {
 	name: "LineChart",
 	props: {
+		id: {
+			type: String,
+			default: 'line-chart'
+		},
 		config: {
 			type: Object,
 			default: () => ({
@@ -74,7 +78,7 @@ export default {
 	methods: {
 		init() {
 			if (!this.chart)
-				this.chart = echarts.init(document.getElementById("line-chart"));
+				this.chart = echarts.init(document.getElementById(this.id))
 			this.chart.setOption({
 				// title: {
 				// 	text: "ECharts 入门示例",
@@ -85,14 +89,14 @@ export default {
 					bottom: 24,
 					right: 12,
 				},
-				tooltip: {
-					trigger: "axis",
-					axisPointer: {
-						lineStyle: {
-							color: "#eee3",
-						},
-					},
-				},
+				// tooltip: {
+				// 	trigger: "axis",
+				// 	axisPointer: {
+				// 		lineStyle: {
+				// 			color: "#eee3",
+				// 		},
+				// 	},
+				// },
 				xAxis: {
 					data: Array(31)
 						.fill(1)
@@ -175,7 +179,7 @@ export default {
 							// 	],
 							// },
 							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: this.colors[index] + "44" },
+								{ offset: 0, color: this.colors[index] + "33" },
 								{ offset: 1, color: "transparent" },
 							]),
 						},