diff --git a/src/components/boxes/HistoryTemp.vue b/src/components/boxes/HistoryTemp.vue
index 15b2059..25e5462 100644
--- a/src/components/boxes/HistoryTemp.vue
+++ b/src/components/boxes/HistoryTemp.vue
@@ -1,17 +1,22 @@
 <template>
-	<div class="history-temp flex flex-col" style="height: 100%;">
-    <h3>窑炉历史温度趋势</h3>
-    <BarChart class="flex-1"/>
-  </div>
+	<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'
+import BarChart from "../charts/BarChart.vue";
 
 export default {
 	name: "HistoryTemp",
-  components: { BarChart },
-	props: {},
+	components: { BarChart },
+	props: {
+		series: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
 	data() {
 		return {};
 	},
@@ -24,19 +29,18 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
-
 .flex-1 {
 	flex: 1;
 	// background: #eee;
 }
 
 h3 {
-  margin: 0;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-size: adjust(10px);
-  letter-spacing: adjust(1px);
-  color: #52fff8;
-  margin: adjust(12px) 0;
+	margin: 0;
+	font-family: sans-serif;
+	font-weight: 400;
+	font-size: adjust(10px);
+	letter-spacing: adjust(1px);
+	color: #52fff8;
+	margin: adjust(12px) 0;
 }
 </style>
diff --git a/src/components/boxes/InWater.vue b/src/components/boxes/InWater.vue
index cb6b289..0e94d74 100644
--- a/src/components/boxes/InWater.vue
+++ b/src/components/boxes/InWater.vue
@@ -1,28 +1,28 @@
 <template>
-  <!-- 窑炉进口水温 -->
-  <Container usage="NumberAndChart">
-    <SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
-      <div class="pic" style=""></div>
-      <div class="content flex flex-col">
-        <div class="realtime">
-          <div class="time flex flex-center">
-            <DigitalBox
-              class="time--item"
-              v-for="(item, index) in '999'.split('')"
-              :key="index"
-              :value="item"
-            />
-            <span class="unit">℃</span>
-          </div>
-          <div class="text">进口实时水温</div>
-        </div>
-        <div class="wave"></div>
-        <div class="graph flex-1">
-          <HistoryTrend />
-        </div>
-      </div>
-    </SubContainer>
-  </Container>
+	<!-- 窑炉进口水温 -->
+	<Container usage="NumberAndChart">
+		<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
+			<div class="pic" style=""></div>
+			<div class="content flex flex-col">
+				<div class="realtime">
+					<div class="time flex flex-center">
+						<DigitalBox
+							class="time--item"
+							v-for="(item, index) in '999'.split('')"
+							:key="index"
+							:value="item"
+						/>
+						<span class="unit">℃</span>
+					</div>
+					<div class="text">进口实时水温</div>
+				</div>
+				<div class="wave"></div>
+				<div class="graph flex-1">
+					<HistoryTrend key="water-in" :series="kilnWaterIn" />
+				</div>
+			</div>
+		</SubContainer>
+	</Container>
 </template>
 
 <script>
@@ -31,16 +31,20 @@ import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
 import HistoryTrend from "./HistoryTemp.vue";
+import { mapState } from "vuex";
 
 export default {
-  name: "XicaoTemp",
-  props: {},
-  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-  data() {
-    return {
-      chartConfig: {},
-    };
-  },
+	name: "InWater",
+	props: {},
+	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+	computed: {
+		...mapState(["kilnWaterIn"]),
+	},
 };
 </script>
 
@@ -48,85 +52,85 @@ export default {
 @import "../../assets/styles/functions";
 
 .pic {
-  background: url(../../assets/in-water.png) no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
-  position: absolute;
-  top: adjust(24px);
-  right: 0;
-  width:adjust(w(386px));
-  height: adjust(h(364px));
+	background: url(../../assets/in-water.png) no-repeat;
+	background-size: 100% 100%;
+	background-position: center;
+	position: absolute;
+	top: adjust(24px);
+	right: 0;
+	width: adjust(w(386px));
+	height: adjust(h(364px));
 }
 
 .content {
-  height: 100%;
+	height: 100%;
 }
 
 .wave {
-  transform: translateX(adjust(-16px));
-  width: adjust(w(793px));
-  height: adjust(h(72px));
-  background: url(../../assets/inwater.png) no-repeat;
-  background-size: 100% 100%;
+	transform: translateX(adjust(-16px));
+	width: adjust(w(793px));
+	height: adjust(h(72px));
+	background: url(../../assets/inwater.png) no-repeat;
+	background-size: 100% 100%;
 }
 
 .graph {
-  // background: #ccc3;
+	// background: #ccc3;
 }
 
 .flex-1 {
-  flex: 1;
-  // background: #eee;
+	flex: 1;
+	// background: #eee;
 }
 
 .time {
-  // background: #eee;
-  margin: adjust(12px) 0;
-  padding-left: adjust(14px);
+	// background: #eee;
+	margin: adjust(12px) 0;
+	padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-  margin-right: adjust(5px);
+	margin-right: adjust(5px);
 }
 
 .unit {
-  font-family: Ubuntu, monospace, sans-serif !important;
-  font-size: adjust(20px);
-  letter-spacing: adjust(1px);
-  align-self: flex-end;
+	font-family: Ubuntu, monospace, sans-serif !important;
+	font-size: adjust(20px);
+	letter-spacing: adjust(1px);
+	align-self: flex-end;
 }
 
 .text {
-  display: inline-block;
-  margin-left: adjust(24px);
-  margin-bottom: adjust(10px);
-  padding: adjust(12px) 0;
-  text-align: center;
-  font-size: adjust(22px);
-  letter-spacing: adjust(1px);
-  position: relative;
-  z-index: 10;
-  user-select: none;
+	display: inline-block;
+	margin-left: adjust(24px);
+	margin-bottom: adjust(10px);
+	padding: adjust(12px) 0;
+	text-align: center;
+	font-size: adjust(22px);
+	letter-spacing: adjust(1px);
+	position: relative;
+	z-index: 10;
+	user-select: none;
 }
 
 .text::after {
-  content: "";
-  display: block;
-  position: absolute;
-  z-index: 0;
-  left: 0;
-  bottom: adjust(10px);
-  height: adjust(4px);
-  width: 100%;
-  /* 渐变色 */
-  background: radial-gradient(
-    ellipse at center,
-    #6fe2ff,
-    #6fe2ffc0,
-    #52cbef80,
-    #52cbef30,
-    #52cbef00,
-    transparent
-  );
+	content: "";
+	display: block;
+	position: absolute;
+	z-index: 0;
+	left: 0;
+	bottom: adjust(10px);
+	height: adjust(4px);
+	width: 100%;
+	/* 渐变色 */
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#6fe2ffc0,
+		#52cbef80,
+		#52cbef30,
+		#52cbef00,
+		transparent
+	);
 }
 </style>
diff --git a/src/components/boxes/OutWater.vue b/src/components/boxes/OutWater.vue
index b30a2b7..31d2dfe 100644
--- a/src/components/boxes/OutWater.vue
+++ b/src/components/boxes/OutWater.vue
@@ -1,28 +1,28 @@
 <template>
-  <!-- 窑炉出口水温 -->
-  <Container usage="NumberAndChart">
-    <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
-      <div class="pic" style=""></div>
-      <div class="content flex flex-col">
-        <div class="realtime">
-          <div class="time flex flex-center">
-            <DigitalBox
-              class="time--item"
-              v-for="(item, index) in '999'.split('')"
-              :key="index"
-              :value="item"
-            />
-            <span class="unit">℃</span>
-          </div>
-          <div class="text">出口实时水温</div>
-        </div>
-        <div class="wave"></div>
-        <div class="graph flex-1">
-          <HistoryTrend />
-        </div>
-      </div>
-    </SubContainer>
-  </Container>
+	<!-- 窑炉出口水温 -->
+	<Container usage="NumberAndChart">
+		<SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
+			<div class="pic" style=""></div>
+			<div class="content flex flex-col">
+				<div class="realtime">
+					<div class="time flex flex-center">
+						<DigitalBox
+							class="time--item"
+							v-for="(item, index) in '999'.split('')"
+							:key="index"
+							:value="item"
+						/>
+						<span class="unit">℃</span>
+					</div>
+					<div class="text">出口实时水温</div>
+				</div>
+				<div class="wave"></div>
+				<div class="graph flex-1">
+					<HistoryTrend key="water-out" :series="kilnWaterOut" />
+				</div>
+			</div>
+		</SubContainer>
+	</Container>
 </template>
 
 <script>
@@ -31,16 +31,20 @@ import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
 import HistoryTrend from "./HistoryTemp.vue";
+import { mapState } from "vuex";
 
 export default {
-  name: "XicaoTemp",
-  props: {},
-  components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
-  data() {
-    return {
-      chartConfig: {},
-    };
-  },
+	name: "OutWater",
+	props: {},
+	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+	computed: {
+		...mapState(["kilnWaterOut"]),
+	},
 };
 </script>
 
@@ -48,85 +52,85 @@ export default {
 @import "../../assets/styles/functions";
 
 .pic {
-  background: url(../../assets/out-water.png) no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
-  position: absolute;
-  top: adjust(24px);
-  right: 0;
-  width: adjust(w(386px));
-  height: adjust(h(364px));
+	background: url(../../assets/out-water.png) no-repeat;
+	background-size: 100% 100%;
+	background-position: center;
+	position: absolute;
+	top: adjust(24px);
+	right: 0;
+	width: adjust(w(386px));
+	height: adjust(h(364px));
 }
 
 .content {
-  height: 100%;
+	height: 100%;
 }
 
 .wave {
-  transform: translateX(adjust(-16px));
-  width: adjust(w(793px));
-  height: adjust(h(72px));
-  background: url(../../assets/inwater.png) no-repeat;
-  background-size: 100% 100%;
+	transform: translateX(adjust(-16px));
+	width: adjust(w(793px));
+	height: adjust(h(72px));
+	background: url(../../assets/inwater.png) no-repeat;
+	background-size: 100% 100%;
 }
 
 .graph {
-  // background: #ccc3;
+	// background: #ccc3;
 }
 
 .flex-1 {
-  flex: 1;
-  // background: #eee;
+	flex: 1;
+	// background: #eee;
 }
 
 .time {
-  // background: #eee;
-  margin: adjust(12px) 0;
-  padding-left: adjust(14px);
+	// background: #eee;
+	margin: adjust(12px) 0;
+	padding-left: adjust(14px);
 }
 
 .time--item:not(:last-child) {
-  margin-right: adjust(5px);
+	margin-right: adjust(5px);
 }
 
 .unit {
-  font-family: Ubuntu, monospace, sans-serif !important;
-  font-size: adjust(20px);
-  letter-spacing: adjust(1px);
-  align-self: flex-end;
+	font-family: Ubuntu, monospace, sans-serif !important;
+	font-size: adjust(20px);
+	letter-spacing: adjust(1px);
+	align-self: flex-end;
 }
 
 .text {
-  display: inline-block;
-  margin-left: adjust(24px);
-  margin-bottom: adjust(10px);
-  padding: adjust(12px) 0;
-  text-align: center;
-  font-size: adjust(22px);
-  letter-spacing: adjust(1px);
-  position: relative;
-  z-index: 10;
-  user-select: none;
+	display: inline-block;
+	margin-left: adjust(24px);
+	margin-bottom: adjust(10px);
+	padding: adjust(12px) 0;
+	text-align: center;
+	font-size: adjust(22px);
+	letter-spacing: adjust(1px);
+	position: relative;
+	z-index: 10;
+	user-select: none;
 }
 
 .text::after {
-  content: "";
-  display: block;
-  position: absolute;
-  z-index: 0;
-  left: 0;
-  bottom: adjust(10px);
-  height: adjust(4px);
-  width: 100%;
-  /* 渐变色 */
-  background: radial-gradient(
-    ellipse at center,
-    #6fe2ff,
-    #6fe2ffc0,
-    #52cbef80,
-    #52cbef30,
-    #52cbef00,
-    transparent
-  );
+	content: "";
+	display: block;
+	position: absolute;
+	z-index: 0;
+	left: 0;
+	bottom: adjust(10px);
+	height: adjust(4px);
+	width: 100%;
+	/* 渐变色 */
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#6fe2ffc0,
+		#52cbef80,
+		#52cbef30,
+		#52cbef00,
+		transparent
+	);
 }
 </style>
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
index 312d5ba..635d24e 100644
--- a/src/components/charts/BarChart.vue
+++ b/src/components/charts/BarChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <!-- bar chart  -->
-  <div class="bar-chart" :id="id"></div>
+	<!-- bar chart  -->
+	<div class="bar-chart" :id="id"></div>
 </template>
 
 <script>
@@ -8,9 +8,9 @@ import * as echarts from "echarts/core";
 import { BarChart } from "echarts/charts";
 
 import {
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
+	TitleComponent,
+	TooltipComponent,
+	GridComponent,
 } from "echarts/components";
 
 import { LabelLayout, UniversalTransition } from "echarts/features";
@@ -18,130 +18,141 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
 
 echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  BarChart,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer,
+	TitleComponent,
+	TooltipComponent,
+	GridComponent,
+	BarChart,
+	LabelLayout,
+	UniversalTransition,
+	CanvasRenderer,
 ]);
 
 function adjust(v) {
-	return v * 2
+	return v * 2;
 }
 
 export default {
-  name: "BarChart",
-  props: {
-    config: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      id: Math.random().toString(),
-      chart: null
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      if (!this.chart)
-        this.chart = echarts.init(document.getElementById(this.id));
-      this.chart.setOption({
-        grid: {
-          top: adjust(28),
-          left: adjust(28),
-          bottom: adjust(18),
-          right: adjust(12),
-        },
-        xAxis: {
-          type: "category",
-          data: Array(31)
-            .fill(1)
-            .map((_, index) => index + 1),
-          axisLine: {
-            lineStyle: {
-              color: "#5982b2a0",
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: "#ffffff",
-            fontSize: adjust(7),
-            lineHeight: adjust(1),
-            margin: adjust(8)
-          },
-        },
-        yAxis: {
-          type: "value",
-          name: "单位/℃",
-          nameTextStyle: {
-            color: "#fff9",
-            fontSize: adjust(8),
-            align: "right",
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: "#5982b2a0",
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            formatter: "{value} ℃",
-            color: "#fff9",
-            fontSize: adjust(7),
-            lineHeight: adjust(1),
-          },
-          splitLine: {
-            lineStyle: {
-              color: "#5982b2a0",
-            },
-          },
-          // data: [100, 200, 300, 400, 500],
-        },
-        series: [
-          {
-            data: Array(31)
-              .fill(1)
-              .map(() => {
-                let v = Math.ceil(Math.random() * 100);
-                while (v < 60) {
-                  v = Math.ceil(Math.random() * 100);
-                }
-                return v;
-              }),
-            type: "bar",
-            barWidth: adjust(4),
-            label: {
-              show: true,
-              fontSize: adjust(6),
-              color: "#eee8",
-              position: "top",
-            },
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#A0FF49" },
-                { offset: 0.35, color: "#49FF9A" },
-                { offset: 0.7, color: "#49F2FF" },
-                { offset: 1, color: "#0D6FFF" },
-              ]),
-            },
-          },
-        ],
-      });
-    },
-    initData() {},
-  },
+	name: "BarChart",
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			id: Math.random().toString(),
+			chart: null,
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	watch: {
+		series: {
+			deep: true,
+			handler: function () {
+				console.log("BarChart: series changed!");
+				this.init();
+			},
+		},
+	},
+	methods: {
+		init() {
+			if (!this.chart)
+				this.chart = echarts.init(document.getElementById(this.id));
+			this.chart.setOption({
+				grid: {
+					top: adjust(28),
+					left: adjust(28),
+					bottom: adjust(18),
+					right: adjust(12),
+				},
+				xAxis: {
+					type: "category",
+					data: Array(31)
+						.fill(1)
+						.map((_, index) => index + 1),
+					axisLine: {
+						lineStyle: {
+							color: "#5982b2a0",
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						color: "#ffffff",
+						fontSize: adjust(7),
+						lineHeight: adjust(1),
+						margin: adjust(8),
+					},
+				},
+				yAxis: {
+					type: "value",
+					name: "单位/℃",
+					nameTextStyle: {
+						color: "#fff9",
+						fontSize: adjust(8),
+						align: "right",
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: "#5982b2a0",
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					axisLabel: {
+						formatter: "{value} ℃",
+						color: "#fff9",
+						fontSize: adjust(7),
+						lineHeight: adjust(1),
+					},
+					splitLine: {
+						lineStyle: {
+							color: "#5982b2a0",
+						},
+					},
+					// data: [100, 200, 300, 400, 500],
+				},
+				series: [
+					{
+						data:
+							// this.series
+							Array(31)
+								.fill(1)
+								.map(() => {
+									let v = Math.ceil(Math.random() * 100);
+									while (v < 60) {
+										v = Math.ceil(Math.random() * 100);
+									}
+									return v;
+								}),
+						type: "bar",
+						barWidth: adjust(4),
+						label: {
+							show: true,
+							fontSize: adjust(6),
+							color: "#eee8",
+							position: "top",
+						},
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{ offset: 0, color: "#A0FF49" },
+								{ offset: 0.35, color: "#49FF9A" },
+								{ offset: 0.7, color: "#49F2FF" },
+								{ offset: 1, color: "#0D6FFF" },
+							]),
+						},
+					},
+				],
+			});
+		},
+		initData() {},
+	},
 };
 </script>
 
diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
index 11a3a09..87d19b0 100644
--- a/src/components/charts/LineChart.vue
+++ b/src/components/charts/LineChart.vue
@@ -105,6 +105,7 @@ export default {
 		series: {
 			deep: true,
 			handler: function () {
+				console.log('LineChart: series changed!')
 				this.init();
 			},
 		},