334 lines
8.4 KiB
Vue
334 lines
8.4 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div
|
||
id="defectScatterPlotChart"
|
||
style="width: 100%"
|
||
:style="{ height: chartHeight + 'px' }"
|
||
/>
|
||
<span class="text1">{{ c2 }}</span>
|
||
<span class="text2">{{ c3 }}</span>
|
||
<span class="text3">{{ c1 }}</span>
|
||
<span class="text4">{{ c4 }}</span>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import { tableHeight } from '@/utils/index'
|
||
import resize from '@/utils/chartMixins/resize'
|
||
export default {
|
||
name: 'DefectScatterPlotChart',
|
||
mixins: [resize],
|
||
props: {
|
||
defectMsg: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
cornerData: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: '',
|
||
chartHeight: tableHeight(446),
|
||
list: [
|
||
{ label: 'S', value: 'S' },
|
||
{ label: 'M', value: 'M' },
|
||
{ label: 'L', value: 'L' },
|
||
{ label: 'XL', value: 'XL' },
|
||
{ label: '气泡', value: 'BL' },
|
||
{ label: '变形', value: 'Distortion' },
|
||
{ label: '纤维', value: 'Fiber' },
|
||
{ label: '划伤', value: 'Scratch' },
|
||
{ label: '结节', value: 'Knot' },
|
||
{ label: '结石', value: 'Stone' },
|
||
{ label: '铂金', value: 'Pt' },
|
||
{ label: '拖尾', value: 'Tail' },
|
||
{ label: 'ADG', value: 'Adg' },
|
||
{ label: '点状缺陷', value: 'Tin' },
|
||
{ label: '锡缺陷(顶部)', value: 'Top' },
|
||
{ label: '锡缺陷(底部)', value: 'Bottom' },
|
||
{ label: '无法识别', value: 'Iisrest' }
|
||
],
|
||
c1: '',
|
||
c2: '',
|
||
c3: '',
|
||
c4: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
window.addEventListener('resize', () => {
|
||
this.chartHeight = tableHeight(446)
|
||
})
|
||
},
|
||
watch: {
|
||
defectMsg: function () {
|
||
this.getChart()
|
||
},
|
||
cornerData: function () {
|
||
this.getCorner()
|
||
}
|
||
},
|
||
methods: {
|
||
getCorner() {
|
||
if (this.cornerData.length > 0) {
|
||
for (let i = 0; i < this.cornerData.length; i++) {
|
||
if (this.cornerData[i].cornerID === 'C1') {
|
||
this.c1 =
|
||
this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY + '□'
|
||
}
|
||
if (this.cornerData[i].cornerID === 'C2') {
|
||
this.c2 =
|
||
this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY + '□'
|
||
}
|
||
if (this.cornerData[i].cornerID === 'C3') {
|
||
this.c3 =
|
||
'□' + this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY
|
||
}
|
||
if (this.cornerData[i].cornerID === 'C4') {
|
||
this.c4 =
|
||
'□' + this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY
|
||
}
|
||
}
|
||
} else {
|
||
this.c1 = ''
|
||
this.c2 = ''
|
||
this.c3 = ''
|
||
this.c4 = ''
|
||
}
|
||
},
|
||
transLabel(v) {
|
||
let label = ''
|
||
for (let l = 0; l < this.list.length; l++) {
|
||
if (v === this.list[l].value) {
|
||
label = this.list[l].label
|
||
}
|
||
}
|
||
return label
|
||
},
|
||
getChart() {
|
||
if (
|
||
this.chart !== null &&
|
||
this.chart !== '' &&
|
||
this.chart !== undefined
|
||
) {
|
||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||
}
|
||
var chartDom = document.getElementById('defectScatterPlotChart')
|
||
this.chart = echarts.init(chartDom)
|
||
let legendList = []
|
||
let seriesList = []
|
||
let num = 0 // 计算点的数量，判断后续bursh是否需要延迟
|
||
let delayTime = 0
|
||
for (let i in this.defectMsg) {
|
||
legendList.push(this.transLabel(i))
|
||
let arr1 = []
|
||
let obj = {}
|
||
for (let j of this.defectMsg[i]) {
|
||
let arr2 = []
|
||
arr2.push(2600 - parseInt(j.ypos))
|
||
arr2.push(2250 - parseInt(j.xpos))
|
||
arr1.push(arr2)
|
||
num++
|
||
}
|
||
obj.name = this.transLabel(i)
|
||
obj.type = 'scatter'
|
||
obj.data = arr1
|
||
obj.symbolSize = 5
|
||
seriesList.push(obj)
|
||
}
|
||
if (num <= 3000) {
|
||
delayTime = 0
|
||
} else if (3000 < num <= 7000) {
|
||
delayTime = 1000
|
||
} else if (7000 < num <= 10000) {
|
||
delayTime = 2000
|
||
} else {
|
||
delayTime = 3000
|
||
}
|
||
var option = {
|
||
color: [
|
||
'#5d7ab7',
|
||
'#ec795f',
|
||
'#925041',
|
||
'#fb5099',
|
||
'#f6bd16',
|
||
'#E8684A',
|
||
'#6DC8EC',
|
||
'#9270CA',
|
||
'#FF9D4D',
|
||
'#269A99',
|
||
'#FF99C3',
|
||
'#BDD2FD',
|
||
'#5AD8A6',
|
||
'#FDABAB',
|
||
'#BDEFDB',
|
||
'#5B8FF9',
|
||
'#404E67'
|
||
],
|
||
legend: {
|
||
top: 10,
|
||
left: 0,
|
||
data: legendList,
|
||
textStyle: {
|
||
fontSize: 9
|
||
},
|
||
itemWidth: 10 // 图例宽度
|
||
},
|
||
brush: {
|
||
toolbox: ['rect', 'clear'],
|
||
xAxisIndex: 0,
|
||
throttleType: 'debounce',
|
||
throttleDelay: delayTime
|
||
},
|
||
tooltip: {
|
||
formatter: '{c},{a}'
|
||
},
|
||
grid: {
|
||
x: 60,
|
||
y: 60,
|
||
x2: 20,
|
||
y2: 60,
|
||
borderWidth: 1
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
nameGap: 16,
|
||
nameTextStyle: {
|
||
fontSize: 16
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(0, 0, 0, 0.15)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
rotate: 45
|
||
},
|
||
max: 2600,
|
||
min: 0,
|
||
interval: 100
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
nameLocation: 'end',
|
||
nameGap: 20,
|
||
nameTextStyle: {
|
||
fontSize: 16
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(0, 0, 0, 0.15)'
|
||
}
|
||
},
|
||
max: 2250,
|
||
min: 0,
|
||
interval: 100
|
||
},
|
||
series: seriesList
|
||
}
|
||
let that = this
|
||
this.chart.on('brushSelected', function (params) {
|
||
var brushed = []
|
||
var brushComponent = params.batch[0]
|
||
var total = 0
|
||
var xLong = 0
|
||
var yLong = 0
|
||
if (params.batch[0].areas[0]) {
|
||
xLong = parseInt(
|
||
params.batch[0].areas[0].coordRange[0][1] -
|
||
params.batch[0].areas[0].coordRange[0][0]
|
||
)
|
||
yLong = parseInt(
|
||
params.batch[0].areas[0].coordRange[1][1] -
|
||
params.batch[0].areas[0].coordRange[1][0]
|
||
)
|
||
}
|
||
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
|
||
var rawIndices = brushComponent.selected[sIdx].dataIndex.length
|
||
total += rawIndices
|
||
brushed.push(
|
||
brushComponent.selected[sIdx].seriesName + ' : ' + rawIndices
|
||
)
|
||
}
|
||
brushed.push('总计 : ' + total)
|
||
that.chart.setOption({
|
||
title: {
|
||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||
text: 'SELECTED DATA: \n' + brushed.join('\n'),
|
||
right: params.batch[0].areas[0] ? '10%' : -100,
|
||
bottom: params.batch[0].areas[0] ? 0 : -500,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'normal',
|
||
color: '#fff'
|
||
}
|
||
},
|
||
graphic: [
|
||
{
|
||
type: 'group',
|
||
left: params.batch[0].areas[0]
|
||
? params.batch[0].areas[0].range[0][0]
|
||
: -100,
|
||
top: params.batch[0].areas[0]
|
||
? params.batch[0].areas[0].range[1][1] + 5
|
||
: -100,
|
||
children: [
|
||
{
|
||
type: 'text',
|
||
z: 100,
|
||
style: {
|
||
fill: '#333',
|
||
width: 220,
|
||
overflow: 'break',
|
||
text: xLong + '*' + yLong,
|
||
font: '12px Microsoft YaHei'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
})
|
||
})
|
||
option && this.chart.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
position: relative;
|
||
.text1,
|
||
.text2,
|
||
.text3,
|
||
.text4 {
|
||
position: absolute;
|
||
}
|
||
.text1 {
|
||
top: 30px;
|
||
left: 0;
|
||
}
|
||
.text2 {
|
||
top: 30px;
|
||
right: 0;
|
||
}
|
||
.text3 {
|
||
bottom: 10px;
|
||
left: 0;
|
||
}
|
||
.text4 {
|
||
bottom: 10px;
|
||
right: 0;
|
||
}
|
||
}
|
||
</style>
|