完成工作项趋势图
parent
9fdc400083
commit
29ce65fc05
|
|
@ -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);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
|
|
|
|||
Loading…
Reference in New Issue