263 lines
5.0 KiB
Vue
263 lines
5.0 KiB
Vue
<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>
|