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>
<div id="echartsPie" ref="echartsPie">
<div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div>
<!-- <div class="list_box">-->
<!-- <p>总人数{{ getTotalNumber }}</p>-->
<!-- <p v-for="(item,index) in dataList" :key="index">{{ item.name }}{{ item.value }}</p>-->
<!-- </div>-->
<!-- <div class="list_box">-->
<!-- <p>总人数{{ getTotalNumber }}</p>-->
<!-- <p v-for="(item,index) in dataList" :key="index">{{ item.name }}{{ item.value }}</p>-->
<!-- </div>-->
</div>
</template>
@ -56,68 +56,135 @@ export default {
getOption() {
//
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '统计',
type: 'pie',
stillShowZeroSum: false,
center: ['45%', '55%'],
// radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
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: {
trigger: 'item'
},
series: [
{
name: '统计',
type: 'pie',
center: ['35%', '55%'],
// radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.dataList
}
]};
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.dataList
}
]
};
}
if (this.isLegend) {
option.legend = {
type: 'scroll',
orient: 'vertical',
// right: 10,
left: '80%',
left: '60%',
// right:'50%',
top: 20,
bottom: 20,
}
}
option.series[0].radius = this.isRadius?'80%':['50%', '80%'];
option.series[0].radius = this.isRadius ? '80%' : ['50%', '80%'];
return option;
},
//
initEcharts() {
this.$nextTick(()=>{
this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById(this.id));
// 使
this.myChart.setOption(this.getOption());
});
let that = this;
window.addEventListener('resize', function () {
console.log("addEventListener");
//console.log("addEventListener");
// resize
//that.$nextTick(()=>{
that.myChart.resize();
that.myChart.resize();
//});
});
},
//
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%;
height: 100%;
display: flex;
.echarts_box {
flex-shrink: 0;
}
.list_box {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: scroll;
padding: 50px 50px;
box-sizing:border-box;
box-sizing: border-box;
}
}