79 lines
1.3 KiB
Vue
79 lines
1.3 KiB
Vue
<template>
|
|
<!-- 状态统计 -->
|
|
<div class="containerBox">
|
|
<div class="titleTxt">{{ title }}</div>
|
|
<div class="mychart">
|
|
<JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid" :title="{ text: '全部' }" />
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import JBarChart from '../jChart/bar/JBarChart.vue'
|
|
export default {
|
|
components: { JBarChart },
|
|
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "default title"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
xData:['未开始','进行中','已完成','延期'],
|
|
yData:[
|
|
{
|
|
value: 170,
|
|
itemStyle: {
|
|
color: '#a9adb6'
|
|
}
|
|
},
|
|
{
|
|
value: 320,
|
|
itemStyle: {
|
|
color: '#557dee'
|
|
}
|
|
},
|
|
{
|
|
value: 270,
|
|
itemStyle: {
|
|
color: '#43d7b5'
|
|
}
|
|
},
|
|
{
|
|
value: 310,
|
|
itemStyle: {
|
|
color: '#ff6c7f'
|
|
}
|
|
}],
|
|
color:['#a9adb6','#557dee','#43d7b5','#ff6c7f'],
|
|
grid:['10%','5%','7%','5%']
|
|
};
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.containerBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #0081c3;
|
|
|
|
.titleTxt {
|
|
font-size: 18px;
|
|
color: #6ee4f0;
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
.mychart{
|
|
width: 100%;
|
|
height: 95%;
|
|
}
|
|
}
|
|
</style>
|
|
|