tft-fe/src/views/qualityManagement/components/defectScatterPlotChart.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>