<template>
<div class="left-chart-1">
<div class="lc1-header">今日砼强度统计</div>
<dv-capsule-chart class="lc1-chart" :config="config" />
<dv-decoration-2 style="height:10px;" />
</div>
</template>
<script>
export default {
name: 'LeftChart1',
data () {
return {
config: {
data: [
{
name: '泵送',
value: 167
},
],
colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
unit: 'm³',
showValue: true
},
timer: {}
}
},
mounted () {
let that = this
that.requestData();
// 定时请求数据
this.timer = setInterval(() => {
that.requestData();
}, 60000);
},
beforeDestroy () {
clearInterval(this.timer)
},
methods: {
requestData(){
let postData = this.$qs.stringify({
date_type:2,//日期类型0:昨天,1:今天,2:本月,3:今年
});
var that = this;
this.$http({
method: 'post',
url:'/screen/produceGrade',
data:postData
}).then((res)=>{
if(res.data.code === 200){
this.config.data = res.data.data
this.config = { ...this.config }
}
});
},
},
}
</script>
<style lang="less">
.left-chart-1 {
width: 100%;
height: 37%;
display: flex;
flex-grow: 0;
flex-direction: column;
.lc1-header {
font-size: 24px;
font-weight: bold;
height: 30px;
line-height: 30px;
text-align: center;
align-items: center;
justify-content: center;
display: flex;
}
.lc1-details {
height: 50px;
font-size: 16px;
display: flex;
align-items: center;
text-indent: 20px;
span {
color: #096dd9;
font-weight: bold;
font-size: 35px;
margin-left: 20px;
}
}
.lc1-chart {
flex: 1;
}
}
</style>
Uniapp 大屏展示从后端加载数据显示的胶囊柱图
最新推荐文章于 2024-08-31 09:06:54 发布
这是一个用于展示今日混凝土强度统计的Vue组件。组件包含一个标题'今日砼强度统计',一个胶囊状图表以及一个装饰条。数据每分钟更新一次,通过HTTP POST请求从服务器获取。配置数据包括不同类型的混凝土强度值、颜色、单位和是否显示数值。样式定义了组件的布局和样式,确保图表占据相应空间。
摘要由CSDN通过智能技术生成