update barchart

This commit is contained in:
lb 2023-05-10 17:46:48 +08:00
parent 7b7fed5e2d
commit f2c01f2134
3 changed files with 176 additions and 13 deletions

View 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>

View File

@ -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 {

View File

@ -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>