value全为0图表为灰色且显示“项目暂无进度”+图例显示

main
A 2022-07-14 21:53:08 +08:00
parent 4e547e43b6
commit d349db0806
1 changed files with 84 additions and 14 deletions

View File

@ -55,7 +55,69 @@ export default {
// //
getOption() { getOption() {
// //
let option = { let isAllZero = this.dataList.every(item => {
// console.log(item,"item")
return item.value == 0
})
console.log(isAllZero,"isAllZero")
let option=null
if(isAllZero==true){
for(let i =0;i<this.dataList.length;i++){
this.dataList[i].name = this.dataList[i].name+" 已完成工作项:"+this.dataList[i].value+"项"
}
console.log(this.dataList,"this.dataListgroup")
option = {
tooltip: {
trigger: 'item'
},
//
// graphic:{
// type:'text',
// left:'27%',
// top:'50%',
// style:{
// text:'',
// textAlign:'center',
// fill:'#000',
// }
// },
series: [
{
name: '统计',
type: 'pie',
center: ['35%', '55%'],
// radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
formatter: '项目暂无进度'
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
itemStyle: {
normal: {
color: '#D3D3D3'
}
},
data: this.dataList
}
]
};
}else{
for(let i =0;i<this.dataList.length;i++){
this.dataList[i].name = this.dataList[i].name+""+this.dataList[i].value+"人"
}
option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
@ -63,7 +125,7 @@ export default {
{ {
name: '统计', name: '统计',
type: 'pie', type: 'pie',
center: ['45%', '55%'], center: ['35%', '55%'],
// radius: ['40%', '70%'], // radius: ['40%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
@ -82,13 +144,17 @@ export default {
}, },
data: this.dataList data: this.dataList
} }
]}; ]
};
}
if (this.isLegend) { if (this.isLegend) {
option.legend = { option.legend = {
type: 'scroll', type: 'scroll',
orient: 'vertical', orient: 'vertical',
// right: 10, // right: 10,
left: '80%', left: '60%',
// right:'50%', // right:'50%',
top: 20, top: 20,
bottom: 20, bottom: 20,
@ -100,13 +166,14 @@ export default {
// //
initEcharts() { initEcharts() {
this.$nextTick(() => { this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById(this.id)); this.myChart = echarts.init(document.getElementById(this.id));
// 使 // 使
this.myChart.setOption(this.getOption()); this.myChart.setOption(this.getOption());
}); });
let that = this; let that = this;
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
console.log("addEventListener"); //console.log("addEventListener");
// resize // resize
//that.$nextTick(()=>{ //that.$nextTick(()=>{
that.myChart.resize(); that.myChart.resize();
@ -116,6 +183,7 @@ export default {
// //
updateEcharts() { updateEcharts() {
this.myChart.setOption(this.getOption(), true); this.myChart.setOption(this.getOption(), true);
console.log( this.dataList," this.dataList")
} }
} }
} }
@ -126,9 +194,11 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
.echarts_box { .echarts_box {
flex-shrink: 0; flex-shrink: 0;
} }
.list_box { .list_box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;