104 lines
2.2 KiB
Vue
104 lines
2.2 KiB
Vue
<template>
|
||
<div>
|
||
<div
|
||
id="palletLevel"
|
||
style="width: 100%"
|
||
:style="{ height: chartHeight + 'px' }"
|
||
></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import { tableHeight } from '@/utils/index'
|
||
import resize from '@/utils/chartMixins/resize'
|
||
export default {
|
||
name: 'PalletLevelChart',
|
||
mixins: [resize],
|
||
props: {
|
||
chartMsg: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: '',
|
||
chartHeight: tableHeight(400) * 0.5
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.getChart()
|
||
})
|
||
window.addEventListener('resize', () => {
|
||
this.chartHeight = tableHeight(400) * 0.5
|
||
})
|
||
},
|
||
watch: {
|
||
chartMsg: function () {
|
||
this.getChart()
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart) {
|
||
return
|
||
}
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
},
|
||
methods: {
|
||
getChart() {
|
||
if (
|
||
this.chart !== null &&
|
||
this.chart !== '' &&
|
||
this.chart !== undefined
|
||
) {
|
||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||
}
|
||
var chartDom = document.getElementById('palletLevel')
|
||
this.chart = echarts.init(chartDom)
|
||
console.log(this.chartMsg)
|
||
var lp = this.chartMsg.okNum
|
||
var jg = this.chartMsg.reprocessNum
|
||
var fp = this.chartMsg.wasteNum
|
||
const color = [
|
||
'rgba(91, 143, 249, 0.8500)',
|
||
'rgba(90, 216, 166, 0.8500)',
|
||
'rgba(246, 189, 22, 0.8500)'
|
||
]
|
||
var option = {
|
||
color: color,
|
||
legend: {
|
||
icon: 'circle',
|
||
bottom: '0',
|
||
left: 'center',
|
||
itemWidth: 10,
|
||
itemHeight: 10
|
||
},
|
||
series: {
|
||
name: 'palletLeve',
|
||
type: 'pie',
|
||
radius: ['40%', '60%'],
|
||
center: ['50%', '45%'],
|
||
data: [
|
||
{
|
||
value: lp,
|
||
name: '良品 ' + lp
|
||
},
|
||
{
|
||
value: jg,
|
||
name: '再加工品 ' + jg
|
||
},
|
||
{
|
||
value: fp,
|
||
name: '废品 ' + fp
|
||
}
|
||
]
|
||
}
|
||
}
|
||
option && this.chart.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|