tft-fe/src/views/qualityManagement/components/defectScatterPlotChart.vue

263 lines
5.0 KiB
Vue
Raw Normal View History

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>