value全为0图表为灰色且显示“项目暂无进度”+图例显示
parent
4e547e43b6
commit
d349db0806
|
@ -55,7 +55,69 @@ export default {
|
|||
// 获取配置
|
||||
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: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
@ -63,7 +125,7 @@ export default {
|
|||
{
|
||||
name: '统计',
|
||||
type: 'pie',
|
||||
center: ['45%', '55%'],
|
||||
center: ['35%', '55%'],
|
||||
// radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
|
@ -82,13 +144,17 @@ export default {
|
|||
},
|
||||
data: this.dataList
|
||||
}
|
||||
]};
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
if (this.isLegend) {
|
||||
option.legend = {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
// right: 10,
|
||||
left: '80%',
|
||||
left: '60%',
|
||||
// right:'50%',
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
|
@ -100,13 +166,14 @@ export default {
|
|||
// 初始化图表
|
||||
initEcharts() {
|
||||
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();
|
||||
|
@ -116,6 +183,7 @@ export default {
|
|||
// 更新图表
|
||||
updateEcharts() {
|
||||
this.myChart.setOption(this.getOption(), true);
|
||||
console.log( this.dataList," this.dataList")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -126,9 +194,11 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.echarts_box {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
Loading…
Reference in New Issue