2023-01-03 09:33:30 +08:00
|
|
|
|
<template>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div
|
|
|
|
|
id="defectScatterPlotChart"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
:style="{ height: chartHeight + 'px' }"
|
|
|
|
|
/>
|
|
|
|
|
<span class="text1">文本框11111</span>
|
|
|
|
|
<span class="text2">文本框222222232323232322</span>
|
|
|
|
|
<span class="text3">文本框33333</span>
|
|
|
|
|
<span class="text4">文本框44444</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],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
chartDom: '',
|
|
|
|
|
chart: '',
|
2023-02-21 16:34:49 +08:00
|
|
|
|
chartHeight: tableHeight(446)
|
2023-01-03 09:33:30 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
window.addEventListener('resize', () => {
|
2023-02-21 16:34:49 +08:00
|
|
|
|
this.chartHeight = tableHeight(446)
|
2023-01-03 09:33:30 +08:00
|
|
|
|
})
|
2023-02-21 16:34:49 +08:00
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.getChart()
|
|
|
|
|
}, 20)
|
2023-01-03 09:33:30 +08:00
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getChart() {
|
2023-02-21 16:34:49 +08:00
|
|
|
|
if (
|
|
|
|
|
this.chart !== null &&
|
|
|
|
|
this.chart !== '' &&
|
|
|
|
|
this.chart !== undefined
|
|
|
|
|
) {
|
|
|
|
|
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
|
|
|
|
}
|
|
|
|
|
this.chartDom = document.getElementById('defectScatterPlotChart')
|
|
|
|
|
this.chart = echarts.init(this.chartDom)
|
2023-01-03 09:33:30 +08:00
|
|
|
|
const dataS = [
|
2023-03-10 16:55:32 +08:00
|
|
|
|
[1, 55],
|
|
|
|
|
[2, 25],
|
|
|
|
|
[3, 56],
|
|
|
|
|
[4, 33],
|
|
|
|
|
[5, 42],
|
|
|
|
|
[6, 82],
|
|
|
|
|
[7, 74],
|
|
|
|
|
[8, 78],
|
|
|
|
|
[9, 267],
|
|
|
|
|
[10, 185],
|
|
|
|
|
[11, 39],
|
|
|
|
|
[12, 41],
|
|
|
|
|
[13, 64],
|
|
|
|
|
[14, 108],
|
|
|
|
|
[15, 108],
|
|
|
|
|
[16, 33],
|
|
|
|
|
[17, 94],
|
|
|
|
|
[18, 186],
|
|
|
|
|
[19, 57],
|
|
|
|
|
[20, 22],
|
|
|
|
|
[21, 39],
|
|
|
|
|
[22, 94],
|
|
|
|
|
[23, 99],
|
|
|
|
|
[24, 31],
|
|
|
|
|
[25, 42],
|
|
|
|
|
[26, 154],
|
|
|
|
|
[27, 234],
|
|
|
|
|
[28, 160],
|
|
|
|
|
[29, 134],
|
|
|
|
|
[30, 52],
|
|
|
|
|
[31, 46]
|
2023-01-03 09:33:30 +08:00
|
|
|
|
]
|
|
|
|
|
const dataM = [
|
2023-03-10 16:55:32 +08:00
|
|
|
|
[1, 26],
|
|
|
|
|
[2, 85],
|
|
|
|
|
[3, 78],
|
|
|
|
|
[4, 21],
|
|
|
|
|
[5, 41],
|
|
|
|
|
[6, 56],
|
|
|
|
|
[7, 64],
|
|
|
|
|
[8, 55],
|
|
|
|
|
[9, 76],
|
|
|
|
|
[10, 91],
|
|
|
|
|
[11, 84],
|
|
|
|
|
[12, 64],
|
|
|
|
|
[13, 70],
|
|
|
|
|
[14, 77],
|
|
|
|
|
[15, 109],
|
|
|
|
|
[16, 73],
|
|
|
|
|
[17, 54],
|
|
|
|
|
[18, 51],
|
|
|
|
|
[19, 91],
|
|
|
|
|
[20, 73],
|
|
|
|
|
[21, 73],
|
|
|
|
|
[22, 84],
|
|
|
|
|
[23, 93],
|
|
|
|
|
[24, 99],
|
|
|
|
|
[25, 146],
|
|
|
|
|
[26, 113],
|
|
|
|
|
[27, 81],
|
|
|
|
|
[28, 56],
|
|
|
|
|
[29, 82],
|
|
|
|
|
[30, 106],
|
|
|
|
|
[31, 118]
|
2023-01-03 09:33:30 +08:00
|
|
|
|
]
|
|
|
|
|
const dataL = [
|
2023-03-10 16:55:32 +08:00
|
|
|
|
[1, 91],
|
|
|
|
|
[2, 65],
|
|
|
|
|
[3, 83],
|
|
|
|
|
[4, 109],
|
|
|
|
|
[5, 106],
|
|
|
|
|
[6, 109],
|
|
|
|
|
[7, 106],
|
|
|
|
|
[8, 89],
|
|
|
|
|
[9, 53],
|
|
|
|
|
[10, 80],
|
|
|
|
|
[11, 117],
|
|
|
|
|
[12, 99],
|
|
|
|
|
[13, 95],
|
|
|
|
|
[14, 116],
|
|
|
|
|
[15, 108],
|
|
|
|
|
[16, 134],
|
|
|
|
|
[17, 79],
|
|
|
|
|
[18, 71],
|
|
|
|
|
[19, 97],
|
|
|
|
|
[20, 84],
|
|
|
|
|
[21, 87],
|
|
|
|
|
[22, 104],
|
|
|
|
|
[23, 87],
|
|
|
|
|
[24, 168],
|
|
|
|
|
[25, 65],
|
|
|
|
|
[26, 39],
|
|
|
|
|
[27, 39],
|
|
|
|
|
[28, 93],
|
|
|
|
|
[29, 188],
|
|
|
|
|
[30, 174],
|
|
|
|
|
[31, 187]
|
2023-01-03 09:33:30 +08:00
|
|
|
|
]
|
|
|
|
|
var option = {
|
2023-03-09 17:01:02 +08:00
|
|
|
|
color: [
|
|
|
|
|
'#5d7ab7',
|
|
|
|
|
'#ec795f',
|
|
|
|
|
'#925041',
|
|
|
|
|
'#fb5099',
|
|
|
|
|
'#f6bd16',
|
|
|
|
|
'#E8684A',
|
|
|
|
|
'#6DC8EC',
|
|
|
|
|
'#9270CA',
|
|
|
|
|
'#FF9D4D',
|
|
|
|
|
'#269A99',
|
|
|
|
|
'#FF99C3',
|
|
|
|
|
'#BDD2FD',
|
|
|
|
|
'#5AD8A6',
|
|
|
|
|
'#FDABAB',
|
|
|
|
|
'#BDEFDB',
|
|
|
|
|
'#5B8FF9',
|
|
|
|
|
'#404E67'
|
|
|
|
|
],
|
2023-01-03 09:33:30 +08:00
|
|
|
|
legend: {
|
|
|
|
|
top: 10,
|
|
|
|
|
left: 0,
|
|
|
|
|
data: ['S', 'M', 'L'],
|
|
|
|
|
textStyle: {
|
2023-02-21 16:34:49 +08:00
|
|
|
|
fontSize: 9
|
|
|
|
|
},
|
|
|
|
|
itemWidth: 10 // 图例宽度
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
x: 60,
|
|
|
|
|
y: 60,
|
|
|
|
|
x2: 10,
|
|
|
|
|
y2: 60,
|
|
|
|
|
borderWidth: 1
|
2023-01-03 09:33:30 +08:00
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
nameGap: 16,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
fontSize: 16
|
|
|
|
|
},
|
|
|
|
|
max: 31,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(0, 0, 0, 0.15)'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
nameLocation: 'end',
|
|
|
|
|
nameGap: 20,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
fontSize: 16
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(0, 0, 0, 0.15)'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: 'S',
|
|
|
|
|
type: 'scatter',
|
2023-02-21 16:34:49 +08:00
|
|
|
|
data: dataS,
|
|
|
|
|
symbolSize: 5
|
2023-01-03 09:33:30 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'M',
|
|
|
|
|
type: 'scatter',
|
2023-02-21 16:34:49 +08:00
|
|
|
|
data: dataM,
|
|
|
|
|
symbolSize: 5
|
2023-01-03 09:33:30 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'L',
|
|
|
|
|
type: 'scatter',
|
2023-02-21 16:34:49 +08:00
|
|
|
|
data: dataL,
|
|
|
|
|
symbolSize: 5
|
2023-01-03 09:33:30 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
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>
|