update barchart
This commit is contained in:
parent
7b7fed5e2d
commit
f2c01f2134
43
src/components/boxes/HistoryTemp.vue
Normal file
43
src/components/boxes/HistoryTemp.vue
Normal file
@ -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>
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user