完成工作项趋势图

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>
import * as echarts from 'echarts'
import request from "../utils/request";
import moment from "moment";
export default {
name: "TendencyChart",
props: {
//
isLegend: {
type: Boolean,
default: false
},
//
isRadius: {
type: Boolean,
default: false
},
//
dataList: {
type: Array,
default: []
}
},
data() {
this.myChart = null
return {
myChart: null
chartData: []
}
},
mounted() {
@ -34,64 +20,90 @@ export default {
},
computed: {
getTotalNumber() {
let total = this.dataList.reduce((prev, item) => {
return this.dataList.reduce((prev, item) => {
prev += item.value
return prev
}, 0)
return total;
}, 0);
}
},
methods: {
//
getOption() {
//
let option = {
return {
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: [
{
name: '统计',
type: 'pie',
center: ['45%', '55%'],
// radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
name: '已完成',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
focus: 'series'
},
labelLine: {
show: false
data: this.chartData['已完成'].map((item) => {
return item.taskNum
})
},
data: this.dataList
}
{
name: '未完成',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
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() {
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;
window.addEventListener('resize', function () {
@ -104,7 +116,21 @@ export default {
},
//
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-leave-active {
will-change: transform;
transition: all 500ms cubic-bezier(.55,0,.1,1);
transition: all 400ms cubic-bezier(.55,0,.1,1);
backface-visibility: hidden;
}
.slide-right-enter-from {
opacity: 0;
transform: translate3d(0, -100%, 0);
transform: translate3d(0, -30%, 0);
}
.slide-right-leave-to {
opacity: 0;
@ -209,7 +209,7 @@ slide-left-enter-active,
}
.slide-left-enter-from{
opacity: 0;
transform: translate3d(0, 100%, 0);
transform: translate3d(0, 30%, 0);
}
.slide-left-leave-to{
opacity: 0;

View File

@ -201,13 +201,13 @@
</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">
<div style="flex: 1;height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">工作项统计</p>
<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">
<div style="background-color: #67c23a;flex: 1;"></div>
<TendencyChart style="flex: 1;"></TendencyChart>
</div>
</div>
</div>
@ -267,10 +267,11 @@ import {ref} from 'vue'
import request from "@/utils/request";
import moment from "moment";
import EditProjectDialog from "../components/EditProjectDialog";
import TendencyChart from "../components/TendencyChart";
export default {
name: "ProjectInfo",
components: {EditProjectDialog},
components: {EditProjectDialog, TendencyChart},
data() {
return {
project: {
@ -498,7 +499,7 @@ export default {
},
//
getannouncementList() {
var that = this;
const that = this;
let projectId = this.$route.params.projectId;
request({
url: `project/${projectId}/announcement`,