130 lines
4.4 KiB
Vue
130 lines
4.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="echarts" id="botdesignecharts"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
designData: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
timerId: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
designData(newVal) {
|
||
|
|
if (newVal && newVal.projectProcess) {
|
||
|
|
this.echarts();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// this.echarts();
|
||
|
|
},
|
||
|
|
beforeUnmount() {
|
||
|
|
clearInterval(this.timerId);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
echarts() {
|
||
|
|
const myChart = echarts.init(document.getElementById("botdesignecharts"));
|
||
|
|
let chartData = [
|
||
|
|
// { value: 20, label: { color: '#fff' } },
|
||
|
|
// { value: 50, label: { color: '#fff' } },
|
||
|
|
];
|
||
|
|
if (this.designData.projectProcess) {
|
||
|
|
this.designData.projectProcess.map((value, index) => {
|
||
|
|
if (value.isExten == 1) {
|
||
|
|
chartData.push({ value: value.projectProcess, label: { color: '#f00', isExten: value.isExten } });
|
||
|
|
} else {
|
||
|
|
chartData.push({ value: value.projectProcess, label: { color: '#fff', isExten: value.isExten } });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '8%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
data: this.designData.projectName,
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: { color: "#D8D6D6", width: 1 }
|
||
|
|
},
|
||
|
|
axisTick: { show: false },
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: { color: "#FFF" }, interval: 0, inside: false,
|
||
|
|
rotate: 10,
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
yAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: { formatter: '{value}%', color: "#FFF" },
|
||
|
|
axisLine: { show: false },
|
||
|
|
axisTick: { show: false },
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: { type: 'dashed', color: 'rgba(216,214,214,0.5)' }
|
||
|
|
},
|
||
|
|
interval: 25,
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
type: 'bar',
|
||
|
|
data: chartData,
|
||
|
|
barWidth: 24,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
fontSize: 14,
|
||
|
|
// formatter: "{c}%",
|
||
|
|
formatter: function (params) {
|
||
|
|
const value = params.value;
|
||
|
|
if (params.data.label.isExten == 1) {
|
||
|
|
return `${value}%\n(已延期)`;
|
||
|
|
}
|
||
|
|
return `${value}%`;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function (params) {
|
||
|
|
if (params.data.label.isExten == 1) {
|
||
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{ offset: 0, color: '#FF6666' },
|
||
|
|
{ offset: 1, color: '#FF0000' }
|
||
|
|
]);
|
||
|
|
} else {
|
||
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{ offset: 0, color: '#3CFFCD' },
|
||
|
|
{ offset: 1, color: '#25D1FF' }
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
myChart.setOption(option);
|
||
|
|
window.addEventListener('resize', () => myChart.resize());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.echarts {
|
||
|
|
width: 98%;
|
||
|
|
height: 280px;
|
||
|
|
}
|
||
|
|
</style>
|