Compare commits

...

2 Commits

Author SHA1 Message Date
A 5614ef750c try 2022-07-14 22:08:34 +08:00
A d349db0806 value全为0图表为灰色且显示“项目暂无进度”+图例显示 2022-07-14 21:53:08 +08:00
1 changed files with 107 additions and 38 deletions

View File

@ -1,10 +1,10 @@
<template> <template>
<div id="echartsPie" ref="echartsPie"> <div id="echartsPie" ref="echartsPie">
<div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div> <div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div>
<!-- <div class="list_box">--> <!-- <div class="list_box">-->
<!-- <p>总人数{{ getTotalNumber }}</p>--> <!-- <p>总人数{{ getTotalNumber }}</p>-->
<!-- <p v-for="(item,index) in dataList" :key="index">{{ item.name }}{{ item.value }}</p>--> <!-- <p v-for="(item,index) in dataList" :key="index">{{ item.name }}{{ item.value }}</p>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</template> </template>
@ -56,7 +56,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'
}, },
@ -64,8 +126,7 @@ export default {
{ {
name: '统计', name: '统计',
type: 'pie', type: 'pie',
stillShowZeroSum: false, center: ['35%', '55%'],
center: ['45%', '55%'],
// radius: ['40%', '70%'], // radius: ['40%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
@ -84,31 +145,36 @@ 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,
} }
} }
option.series[0].radius = this.isRadius?'80%':['50%', '80%']; option.series[0].radius = this.isRadius ? '80%' : ['50%', '80%'];
return option; return option;
}, },
// //
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();
@ -117,7 +183,8 @@ export default {
}, },
// //
updateEcharts() { updateEcharts() {
this.myChart.setOption(this.getOption(),true); this.myChart.setOption(this.getOption(), true);
console.log(this.dataList, " this.dataList")
} }
} }
} }
@ -128,16 +195,18 @@ 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;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
padding: 50px 50px; padding: 50px 50px;
box-sizing:border-box; box-sizing: border-box;
} }
} }