From f2c01f2134d33cc4e0a8694572b38c16f8a796d9 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@qq.com>
Date: Wed, 10 May 2023 17:46:48 +0800
Subject: [PATCH] update barchart

---
 src/components/boxes/HistoryTemp.vue |  43 +++++++++
 src/components/boxes/InWater.vue     |  15 ++-
 src/components/charts/BarChart.vue   | 131 +++++++++++++++++++++++++--
 3 files changed, 176 insertions(+), 13 deletions(-)
 create mode 100644 src/components/boxes/HistoryTemp.vue

diff --git a/src/components/boxes/HistoryTemp.vue b/src/components/boxes/HistoryTemp.vue
new file mode 100644
index 0000000..8c17be1
--- /dev/null
+++ b/src/components/boxes/HistoryTemp.vue
@@ -0,0 +1,43 @@
+<template>
+	<div class="history-temp flex flex-col" style="height: 100%;">
+    <h3>窑炉历史温度趋势</h3>
+    <BarChart class="flex-1"/>
+  </div>
+</template>
+
+<script>
+import BarChart from '../charts/BarChart.vue'
+
+export default {
+	name: "HistoryTemp",
+  components: { BarChart },
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+// .history-temp {
+  
+// }
+
+.flex-1 {
+	flex: 1;
+	// background: #eee;
+}
+
+h3 {
+  margin: 0;
+  font-family: sans-serif;
+  font-weight: 400;
+  font-size: 10px;
+  letter-spacing: 1px;
+  color: #52fff8;
+  margin: 8px 0;
+}
+</style>
diff --git a/src/components/boxes/InWater.vue b/src/components/boxes/InWater.vue
index 29806ed..e1f9abc 100644
--- a/src/components/boxes/InWater.vue
+++ b/src/components/boxes/InWater.vue
@@ -3,7 +3,7 @@
 	<Container usage="NumberAndChart">
 		<SubContainer title="窑炉进口水温" icon="inWater" padding="17px">
 			<div class="pic" style=""></div>
-			<div class="flex flex-col">
+			<div class="content flex flex-col">
 				<div class="realtime">
 					<div class="time flex flex-center">
 						<DigitalBox
@@ -17,7 +17,9 @@
 					<div class="text">进口实时水温</div>
 				</div>
 				<div class="wave"></div>
-				<div class="graph flex-1"></div>
+				<div class="graph flex-1">
+					<HistoryTrend />
+				</div>
 			</div>
 		</SubContainer>
 	</Container>
@@ -28,11 +30,12 @@ import LineChart from "../charts/LineChart.vue";
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
+import HistoryTrend from './HistoryTemp.vue'
 
 export default {
 	name: "XicaoTemp",
 	props: {},
-	components: { Container, SubContainer, LineChart, DigitalBox },
+	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
 	data() {
 		return {
 			chartConfig: {},
@@ -55,6 +58,10 @@ export default {
 	height: h(364px);
 }
 
+.content {
+	height: 100%;
+}
+
 .wave {
 	transform: translateX(-16px);
 	width: w(793px);
@@ -64,7 +71,7 @@ export default {
 }
 
 .graph {
-	background: #ccc3;
+	// background: #ccc3;
 }
 
 .flex-1 {
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
index 0579d73..bbeae48 100644
--- a/src/components/charts/BarChart.vue
+++ b/src/components/charts/BarChart.vue
@@ -1,19 +1,132 @@
 <template>
-  <!-- line chart  -->
-	<div></div>
+	<!-- bar chart  -->
+	<div class="bar-chart" :id="id"></div>
 </template>
 
 <script>
+import * as echarts from "echarts/core";
+import { BarChart } from "echarts/charts";
+
+import {
+	TitleComponent,
+	TooltipComponent,
+	GridComponent,
+} from "echarts/components";
+
+import { LabelLayout, UniversalTransition } from "echarts/features";
+
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+	TitleComponent,
+	TooltipComponent,
+	GridComponent,
+	BarChart,
+	LabelLayout,
+	UniversalTransition,
+	CanvasRenderer,
+]);
+
 export default {
 	name: "BarChart",
-	props: {},
-	data() {
-		return {};
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			id: Math.random().toString(),
+			chart: null,
+			config: {},
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			if (!this.chart)
+				this.chart = echarts.init(document.getElementById(this.id));
+			this.chart.setOption({
+				grid: {
+					top: 28,
+					left: 28,
+					bottom: 18,
+					right: 12,
+				},
+				xAxis: {
+					type: 'category',
+					data: Array(31)
+						.fill(1)
+						.map((_, index) => index + 1),
+					axisLine: {
+						lineStyle: {
+							// width: 1,
+							color: "#5982b2a0",
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: "#ffffff",
+						fontSize: 7,
+						lineHeight: 1,
+					},
+				},
+				yAxis: {
+					type: "value",
+					name: "单位/℃",
+					nameTextStyle: {
+						color: "#fff9",
+						fontSize: 8,
+						align: "right",
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: "#5982b2a0",
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						formatter: '{value} ℃',
+						color: "#fff9",
+						fontSize: 7,
+						lineHeight: 1,
+					},
+					splitLine: {
+						lineStyle: {
+							color: "#5982b2a0",
+						},
+					},
+					// data: [100, 200, 300, 400, 500],
+				},
+				series: [
+					{
+						data: Array(31).fill(1).map(() => Math.ceil(Math.random() * 100)),
+						type: 'bar',
+						label: {
+							show: true,
+							fontSize: 6,
+							color: '#eee8',
+							position: 'top',
+						}
+					}
+				]
+			});
+		},
+		initData() {},
 	},
-	created() {},
-	mounted() {},
-	methods: {},
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+// .bar-chart {
+// 	background: #eee3;
+// }
+</style>