Compare commits
2 Commits
96bc233a65
...
5614ef750c
Author | SHA1 | Date |
---|---|---|
A | 5614ef750c | |
A | d349db0806 |
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue