tft-fe/src/views/qualityManagement/components/defectScatterPlotChart.vue
2023-03-10 16:55:32 +08:00

263 lines
5.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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: '',
chartHeight: tableHeight(446)
}
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = tableHeight(446)
})
setTimeout(() => {
this.getChart()
}, 20)
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告Dom已经初始化了一个实例这是销毁实例
}
this.chartDom = document.getElementById('defectScatterPlotChart')
this.chart = echarts.init(this.chartDom)
const dataS = [
[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]
]
const dataM = [
[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]
]
const dataL = [
[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]
]
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: ['S', 'M', 'L'],
textStyle: {
fontSize: 9
},
itemWidth: 10 // 图例宽度
},
grid: {
x: 60,
y: 60,
x2: 10,
y2: 60,
borderWidth: 1
},
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',
data: dataS,
symbolSize: 5
},
{
name: 'M',
type: 'scatter',
data: dataM,
symbolSize: 5
},
{
name: 'L',
type: 'scatter',
data: dataL,
symbolSize: 5
}
]
}
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>