完成工作项趋势图

main
wuyize 2022-07-13 13:52:04 +08:00
parent 9fdc400083
commit 29ce65fc05
3 changed files with 90 additions and 63 deletions

View File

@ -4,29 +4,15 @@
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import request from "../utils/request";
import moment from "moment";
export default { export default {
name: "TendencyChart", name: "TendencyChart",
props: {
//
isLegend: {
type: Boolean,
default: false
},
//
isRadius: {
type: Boolean,
default: false
},
//
dataList: {
type: Array,
default: []
}
},
data() { data() {
this.myChart = null
return { return {
myChart: null chartData: []
} }
}, },
mounted() { mounted() {
@ -34,64 +20,90 @@ export default {
}, },
computed: { computed: {
getTotalNumber() { getTotalNumber() {
let total = this.dataList.reduce((prev, item) => { return this.dataList.reduce((prev, item) => {
prev += item.value prev += item.value
return prev return prev
}, 0) }, 0);
return total;
} }
}, },
methods: { methods: {
// //
getOption() { getOption() {
//
let option = { //
return {
tooltip: { tooltip: {
trigger: 'item' show: true,
showContent: true,
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}, },
legend: {
data: ['已完成', '未完成']
},
color: ['#91cc75', '#79bbff', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.chartData['已完成'].map((item) => {
return moment(item.taskDate * 1000).format("MM月DD日")
})
}
],
yAxis: [
{
type: 'value'
}
],
series: [ series: [
{ {
name: '统计', name: '已完成',
type: 'pie', type: 'line',
center: ['45%', '55%'], stack: 'Total',
// radius: ['40%', '70%'], areaStyle: {},
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: { emphasis: {
label: { focus: 'series'
show: true,
fontSize: '40',
fontWeight: 'bold'
}
}, },
labelLine: { data: this.chartData['已完成'].map((item) => {
show: false return item.taskNum
})
},
{
name: '未完成',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
}, },
data: this.dataList data: this.chartData['未关闭'].map((item) => {
} return item.taskNum
})
},
] ]
}; };
if (this.isLegend) {
option.legend = {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
}
}
option.series[0].radius = this.isRadius ? '80%' : ['50%', '80%'];
return option;
}, },
// //
initEcharts() { initEcharts() {
this.$nextTick(() => { this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById(this.id)); this.myChart = echarts.init(document.getElementById('TendencyChart'));
// 使 // 使
this.myChart.setOption(this.getOption()); this.updateEcharts();
}); });
let that = this; let that = this;
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
@ -104,7 +116,21 @@ export default {
}, },
// //
updateEcharts() { updateEcharts() {
this.myChart.setOption(this.getOption(), true); const that = this;
const projectId = this.$route.params.projectId;
request({
url: `project/${projectId}/task/stats/trend`,
method: "get",
}).then((response) => {
if (response.data.code === 200) {
that.chartData = response.data.data;
console.log(that.chartData);
that.myChart.setOption(this.getOption(), true);
}
}).catch(function (error) {
console.log(error);
});
} }
} }
} }

View File

@ -196,12 +196,12 @@ slide-left-enter-active,
.slide-right-enter-active, .slide-right-enter-active,
.slide-right-leave-active { .slide-right-leave-active {
will-change: transform; will-change: transform;
transition: all 500ms cubic-bezier(.55,0,.1,1); transition: all 400ms cubic-bezier(.55,0,.1,1);
backface-visibility: hidden; backface-visibility: hidden;
} }
.slide-right-enter-from { .slide-right-enter-from {
opacity: 0; opacity: 0;
transform: translate3d(0, -100%, 0); transform: translate3d(0, -30%, 0);
} }
.slide-right-leave-to { .slide-right-leave-to {
opacity: 0; opacity: 0;
@ -209,7 +209,7 @@ slide-left-enter-active,
} }
.slide-left-enter-from{ .slide-left-enter-from{
opacity: 0; opacity: 0;
transform: translate3d(0, 100%, 0); transform: translate3d(0, 30%, 0);
} }
.slide-left-leave-to{ .slide-left-leave-to{
opacity: 0; opacity: 0;

View File

@ -201,13 +201,13 @@
</div> </div>
</div> </div>
<div style="height: 300px;margin: 0 30px 30px 30px; <div style="height: 500px;margin: 0 30px 30px 30px;
display: flex;flex-direction: row;justify-content: space-between"> display: flex;flex-direction: row;justify-content: space-between">
<div style="flex: 1;height: 100%;display: flex;flex-direction: column"> <div style="flex: 1;height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">工作项统计</p> <p class="p-title" style="margin-left: 10px">工作项统计</p>
<div style="flex:1;margin-top: 30px;padding: 20px; <div style="flex:1;margin-top: 30px;padding: 20px;
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;align-items: stretch"> display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;align-items: stretch">
<div style="background-color: #67c23a;flex: 1;"></div> <TendencyChart style="flex: 1;"></TendencyChart>
</div> </div>
</div> </div>
</div> </div>
@ -267,10 +267,11 @@ import {ref} from 'vue'
import request from "@/utils/request"; import request from "@/utils/request";
import moment from "moment"; import moment from "moment";
import EditProjectDialog from "../components/EditProjectDialog"; import EditProjectDialog from "../components/EditProjectDialog";
import TendencyChart from "../components/TendencyChart";
export default { export default {
name: "ProjectInfo", name: "ProjectInfo",
components: {EditProjectDialog}, components: {EditProjectDialog, TendencyChart},
data() { data() {
return { return {
project: { project: {
@ -498,7 +499,7 @@ export default {
}, },
// //
getannouncementList() { getannouncementList() {
var that = this; const that = this;
let projectId = this.$route.params.projectId; let projectId = this.$route.params.projectId;
request({ request({
url: `project/${projectId}/announcement`, url: `project/${projectId}/announcement`,