You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
5.9 KiB
191 lines
5.9 KiB
<template> |
|
<div class="order_box"> |
|
<div class="title_bar">车间订单</div> |
|
<div class="pie_box"> |
|
<div class="pie_box_item" > |
|
<div class="btn_box"> |
|
<span class="btn first" :class="activeIndex == 1 ? 'active' : ''" @click="changeChart(1)">热表</span> |
|
<span class="btn second" :class="activeIndex == 2 ? 'active' : ''" @click="changeChart(2)">烧结</span> |
|
</div> |
|
<div ref="rb_chart" v-show="activeIndex == 1" class="chart_box"></div> |
|
<div ref="sj_chart" v-show="activeIndex == 2" class="chart_box"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
activeIndex:1 |
|
} |
|
}, |
|
mounted() { |
|
this.$nextTick(() =>{ |
|
this.initRbEcharts() |
|
}) |
|
}, |
|
methods: { |
|
changeChart(type){ |
|
this.activeIndex = type |
|
this.$nextTick(() =>{ |
|
if(type == 1){ |
|
this.initRbEcharts() |
|
}else{ |
|
this.initSjEcharts() |
|
} |
|
}) |
|
|
|
}, |
|
initRbEcharts() { |
|
var myChart = this.$echarts.init(this.$refs.rb_chart); |
|
let option = { |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{b} : {c} <br/> 占比：{d}%' |
|
}, |
|
legend: { |
|
// top: '-2%', |
|
left: '15%', |
|
top:'center', |
|
orient: "vertical" |
|
}, |
|
series: [ |
|
{ |
|
top: '10%', |
|
type: 'pie', |
|
radius: ['65%', '95%'], |
|
avoidLabelOverlap: false, |
|
padAngle: 5, |
|
itemStyle: { |
|
borderRadius: 5 |
|
}, |
|
label: { |
|
show: false, |
|
position: 'center' |
|
}, |
|
labelLine: { |
|
show: false |
|
}, |
|
// data: this.problemArr |
|
data:[ |
|
{ value: 8, name: '在制品',itemStyle: {color:'#3B82F6'}}, |
|
{ value: 2, name: '加工中',itemStyle: {color:'#E6A23C'} }, |
|
{ value: 2, name: '检验中',itemStyle: {color:'#EF4444'} }, |
|
{ value: 2, name: '已完成',itemStyle: {color:'#22C55E'} }, |
|
] |
|
} |
|
] |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
initSjEcharts() { |
|
var myChart = this.$echarts.init(this.$refs.sj_chart); |
|
let option = { |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{b} : {c} <br/> 占比：{d}%' |
|
}, |
|
legend: { |
|
// top: '-2%', |
|
left: '15%', |
|
top:'center', |
|
orient: "vertical" |
|
}, |
|
series: [ |
|
{ |
|
top: '10%', |
|
type: 'pie', |
|
radius: ['65%', '95%'], |
|
avoidLabelOverlap: false, |
|
padAngle: 5, |
|
itemStyle: { |
|
borderRadius: 5 |
|
}, |
|
label: { |
|
show: false, |
|
position: 'center' |
|
}, |
|
labelLine: { |
|
show: false |
|
}, |
|
// data: this.problemArr |
|
data:[ |
|
{ value: 20, name: '在制品',itemStyle: {color:'#3B82F6'}}, |
|
{ value: 28, name: '未齐套',itemStyle: {color:'#ff7a45'}}, |
|
{ value: 14, name: '已齐套', itemStyle: {color:'#20c5f6'}}, |
|
{ value: 42, name: '加工中',itemStyle: {color:'#E6A23C'} }, |
|
{ value: 13, name: '检验中',itemStyle: {color:'#EF4444'} }, |
|
{ value: 25, name: '已完成',itemStyle: {color:'#22C55E'} }, |
|
] |
|
} |
|
] |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.order_box { |
|
padding: 20px; |
|
|
|
.title_bar { |
|
font-weight: 550; |
|
} |
|
|
|
.pie_box { |
|
width: 100%; |
|
height: 200px; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.pie_box_item { |
|
width: 100%; |
|
height: 100%; |
|
padding: 10px; |
|
|
|
.btn_box{ |
|
width: 100%; |
|
display: flex; |
|
justify-content: flex-end; |
|
|
|
.btn{ |
|
padding: 5px 15px; |
|
border: 1px solid #eee; |
|
cursor: pointer; |
|
font-size: 14px; |
|
|
|
&.first{ |
|
border-top-left-radius: 6px; |
|
border-bottom-left-radius: 6px; |
|
border-right: none; |
|
} |
|
|
|
&.second{ |
|
border-top-right-radius: 6px; |
|
border-bottom-right-radius: 6px; |
|
} |
|
|
|
|
|
&.active{ |
|
color: rgb(64, 158, 255); |
|
} |
|
} |
|
} |
|
|
|
.title{ |
|
font-weight: 500; |
|
} |
|
|
|
.chart_box{ |
|
width: 100%; |
|
height: 210px; |
|
margin-top: 10px; |
|
} |
|
} |
|
} |
|
} |
|
</style> |