解决工作项图例问题
parent
5614ef750c
commit
da8c9e7801
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="echartsPie" ref="echartsPie">
|
||||
<div id="echartsPositionPie" ref="echartsPositionPie">
|
||||
<div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div>
|
||||
<!-- <div class="list_box">-->
|
||||
<!-- <p>总人数：{{ getTotalNumber }}</p>-->
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: "echartsPie",
|
||||
name: "echartsPositionPie",
|
||||
props: {
|
||||
// 标识，同页面不能相同
|
||||
id: {
|
||||
|
|
@ -64,7 +64,7 @@ export default {
|
|||
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 + "项"
|
||||
this.dataList[i].name = this.dataList[i].name + "：" + this.dataList[i].value + "人"
|
||||
}
|
||||
console.log(this.dataList, "this.dataListgroup")
|
||||
option = {
|
||||
|
|
@ -155,7 +155,7 @@ export default {
|
|||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
// right: 10,
|
||||
left: '60%',
|
||||
left: '59%',
|
||||
// right:'50%',
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
|
|
@ -191,7 +191,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#echartsPie {
|
||||
#echartsPositionPie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<div id="echartsTaskPie" ref="echartsTaskPie">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: "echartsTaskPie",
|
||||
props: {
|
||||
// 标识，同页面不能相同
|
||||
id: {
|
||||
type: String
|
||||
},
|
||||
// 是否要上角图例
|
||||
isLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否为满圆
|
||||
isRadius: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 数据列表
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initEcharts();
|
||||
},
|
||||
computed: {
|
||||
getTotalNumber() {
|
||||
let total = this.dataList.reduce((prev, item) => {
|
||||
prev += item.value
|
||||
return prev
|
||||
}, 0)
|
||||
return total;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取配置
|
||||
getOption() {
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
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,
|
||||
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: '59%',
|
||||
// right:'50%',
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
}
|
||||
}
|
||||
option.series[0].radius = this.isRadius ? '80%' : ['50%', '80%'];
|
||||
return option;
|
||||
},
|
||||
// 初始化图表
|
||||
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");
|
||||
// 让我们的图表调用 resize这个方法
|
||||
//that.$nextTick(()=>{
|
||||
that.myChart.resize();
|
||||
//});
|
||||
});
|
||||
},
|
||||
// 更新图表
|
||||
updateEcharts() {
|
||||
this.myChart.setOption(this.getOption(), true);
|
||||
console.log(this.dataList, " this.dataList")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#echartsTaskPie {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -65,12 +65,12 @@
|
|||
<p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 0 0 30px 0;flex-shrink: 0;">
|
||||
岗位统计</p>
|
||||
<div style="flex: 1;background-color: white; border-radius: 10px;">
|
||||
<EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>
|
||||
<EchartsPositionPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>
|
||||
</div>
|
||||
<p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 15px 0 30px 0;flex-shrink: 0;">
|
||||
团队工作情况统计</p>
|
||||
<div style="flex: 1;background-color: white; border-radius: 10px;">
|
||||
<EchartsPie id="pie_team" ref="pie_team" :isLegend="true" :dataList="teamList"/>
|
||||
<EchartsTaskPie id="pie_team" ref="pie_team" :isLegend="true" :dataList="teamList"/>
|
||||
<!-- <EchartsPie id="pie_team" :isRadius="true" />-->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -118,7 +118,8 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<script>
|
||||
import EchartsPie from "../components/echartsPie";
|
||||
import EchartsTaskPie from "../components/echartsTaskPie";
|
||||
import EchartsPositionPie from "../components/echartsPositionPie";
|
||||
import request from "../utils/request";
|
||||
import CreatePersonDialog from "../components/CreatePersonDialog";
|
||||
import EditJobDialog from "../components/EditJobDialog";
|
||||
|
|
@ -157,7 +158,8 @@ export default {
|
|||
CreatePersonDialog,
|
||||
EditJobDialog,
|
||||
TransferDialog,
|
||||
EchartsPie
|
||||
EchartsTaskPie,
|
||||
EchartsPositionPie
|
||||
},
|
||||
methods: {
|
||||
getOperationsVisible(row) {
|
||||
|
|
@ -342,7 +344,11 @@ export default {
|
|||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#echartsPie {
|
||||
#echartsTaskPie {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#echartsPositionPie {
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue