155 lines
3.2 KiB
Vue
155 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="background" style="height: 100%">
|
||
|
|
<div class="title">当日任务完成率</div>
|
||
|
|
<div style="width: 18vw; height: 20vh; margin: auto auto" id="shuttlesTaskCompleteRadio"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import 《组件名称》 from '《组件路径》 ';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
// import 引入的组件需要注入到对象中才能使用
|
||
|
|
components: {},
|
||
|
|
props: [],
|
||
|
|
emits: [],
|
||
|
|
data() {
|
||
|
|
// 这里存放数据
|
||
|
|
return {
|
||
|
|
|
||
|
|
// 图表实例
|
||
|
|
chart: null,
|
||
|
|
// 柱状图数据
|
||
|
|
option: {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
orient: 'horizontal',
|
||
|
|
align: 'left',
|
||
|
|
x: 'right',
|
||
|
|
y: 'bottom',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: '12'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
color: ['rgb(179,230,97)', '#ffda01'],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '任务完成率',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['30%', '55%'],
|
||
|
|
padAngle: 5,
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 3
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'top',
|
||
|
|
formatter: '{b}' + '\n\r' + '{d}%',
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: true,
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{value: 60, name: '已完成'},
|
||
|
|
{value: 40, name: '未完成'}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 计算属性 类似于 data 概念
|
||
|
|
computed: {},
|
||
|
|
// 监控 data 中的数据变化
|
||
|
|
watch: {},
|
||
|
|
// 方法集合
|
||
|
|
methods: {
|
||
|
|
setOptions() {
|
||
|
|
if(!this.chart) {
|
||
|
|
const dom = document.getElementById('shuttlesTaskCompleteRadio');
|
||
|
|
this.chart = this.$echarts.init(dom);
|
||
|
|
}
|
||
|
|
this.option.series[0].data = [
|
||
|
|
{value: 60, name: '已完成'},
|
||
|
|
{value: 40, name: '未完成'}
|
||
|
|
];
|
||
|
|
let randomArr = [];
|
||
|
|
for (let i = 0; i < 2; i++) {
|
||
|
|
randomArr.push({
|
||
|
|
value: Math.floor(Math.random() * 100 + 30),
|
||
|
|
name: i === 0 ? '已完成' : i === 1 ? '未完成' : '其他'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.option.series[0].data = randomArr;
|
||
|
|
this.chart.setOption(this.option, true);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 组合式 API
|
||
|
|
setup() {
|
||
|
|
},
|
||
|
|
// 创建之前
|
||
|
|
beforeCreate() {
|
||
|
|
},
|
||
|
|
// 创建完成(可以访问 this 实例)
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
// 生命周期 - 挂载之前
|
||
|
|
beforeMount() {
|
||
|
|
},
|
||
|
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||
|
|
mounted() {
|
||
|
|
this.setOptions();
|
||
|
|
setInterval(() =>
|
||
|
|
{
|
||
|
|
this.setOptions();
|
||
|
|
}, 3000)
|
||
|
|
},
|
||
|
|
// 更新之前
|
||
|
|
beforeUpdate() {
|
||
|
|
},
|
||
|
|
// 更新之后
|
||
|
|
updated() {
|
||
|
|
},
|
||
|
|
// 销毁之前
|
||
|
|
beforeUnmount() {
|
||
|
|
},
|
||
|
|
// 销毁完成
|
||
|
|
unmounted() {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.title {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #e2e2e2;
|
||
|
|
padding-left: 25px;
|
||
|
|
padding-top: 18px;
|
||
|
|
}
|
||
|
|
.background {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.title:before {
|
||
|
|
position: absolute;
|
||
|
|
height: 1.2rem;
|
||
|
|
width: 4px;
|
||
|
|
background: #49bcf7;
|
||
|
|
border-radius: 5px;
|
||
|
|
content: "";
|
||
|
|
left: 15px;
|
||
|
|
top: 22px;
|
||
|
|
}
|
||
|
|
</style>
|