数据看板

This commit is contained in:
lSun 2024-12-23 18:53:43 +08:00
parent 49e79471da
commit 73ac8490cb
1 changed files with 117 additions and 111 deletions

View File

@ -13,22 +13,21 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default {
components: {
}, export default {
components: {},
name: 'bottomTwo', name: 'bottomTwo',
props: { props: {
pageData: { pageData: {
// required: true, // required: true,
type: Object, type: Object,
default:{ default: {
addressErrorNum:0, addressErrorNum: 0,
earlyNum:0, earlyNum: 0,
einErrorNum:0, einErrorNum: 0,
lateNum:0, lateNum: 0,
leaveNum:0, leaveNum: 0,
skippingNum:0 skippingNum: 0
} }
}, },
@ -36,8 +35,8 @@ export default {
data() { data() {
return { return {
pieCharts: null, pieCharts: null,
dateTime:"", dateTime: "",
barYData:[22, 18, 11, 23, 29, 33] barYData: [22, 18, 11, 23, 29, 33]
} }
}, },
watch: { watch: {
@ -55,15 +54,15 @@ export default {
this.getInitData() this.getInitData()
}, },
methods: { methods: {
getInitData(){ getInitData() {
setTimeout(()=>{ setTimeout(() => {
this.barYData=[Number(this.pageData.lateNum),Number(this.pageData.earlyNum),Number(this.pageData.skippingNum),Number(this.pageData.leaveNum),Number(this.pageData.addressErrorNum),Number(this.pageData.einErrorNum)] this.barYData = [Number(this.pageData.lateNum), Number(this.pageData.earlyNum), Number(this.pageData.skippingNum), Number(this.pageData.leaveNum), Number(this.pageData.addressErrorNum), Number(this.pageData.einErrorNum)]
console.log(this.barYData) console.log(this.barYData)
this.initChart() this.initChart()
},500) }, 500)
}, },
initChart(){ initChart() {
this.pieCharts = echarts.init(document.getElementById('barBox')) this.pieCharts = echarts.init(document.getElementById('barBox'))
var option = { var option = {
grid: { grid: {
@ -79,9 +78,14 @@ export default {
yAxis: {}, yAxis: {},
series: [{ series: [{
type: 'bar', type: 'bar',
data:this.barYData, data: this.barYData,
itemStyle:{ itemStyle: {
color:"#157DF3" color: "#157DF3"
},
label: {
show: true, //
position: 'top', //
formatter: '{c}' //
} }
}] }]
}; };
@ -97,25 +101,26 @@ export default {
}, },
toggleDialog(v) { toggleDialog(v) {
this.$emit('openDialog', { order: v }) this.$emit('openDialog', {order: v})
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{ .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
// padding-top: 20px; // padding-top: 20px;
.content-box{ .content-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
} }
.title-box{
.title-box {
width: 100%; width: 100%;
height: 30px; height: 30px;
display: flex; display: flex;
@ -123,7 +128,8 @@ export default {
align-items: center; align-items: center;
} }
.chart-box{
.chart-box {
width: 100%; width: 100%;
height: 450px; height: 450px;
} }