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">{{ c2 }}</span>
    <span class="text2">{{ c3 }}</span>
    <span class="text3">{{ c1 }}</span>
    <span class="text4">{{ c4 }}</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],
  props: {
    defectMsg: {
      type: Object,
      default: () => {
        return {}
      }
    },
    cornerData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chart: '',
      chartHeight: tableHeight(446),
      list: [
        { label: 'S', value: 'S' },
        { label: 'M', value: 'M' },
        { label: 'L', value: 'L' },
        { label: 'XL', value: 'XL' },
        { label: '气泡', value: 'BL' },
        { label: '变形', value: 'Distortion' },
        { label: '纤维', value: 'Fiber' },
        { label: '划伤', value: 'Scratch' },
        { label: '结节', value: 'Knot' },
        { label: '结石', value: 'Stone' },
        { label: '铂金', value: 'Pt' },
        { label: '拖尾', value: 'Tail' },
        { label: 'ADG', value: 'Adg' },
        { label: '点状缺陷', value: 'Tin' },
        { label: '锡缺陷(顶部)', value: 'Top' },
        { label: '锡缺陷(底部)', value: 'Bottom' },
        { label: '无法识别', value: 'Iisrest' }
      ],
      c1: '',
      c2: '',
      c3: '',
      c4: ''
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.chartHeight = tableHeight(446)
    })
  },
  watch: {
    defectMsg: function () {
      this.getChart()
    },
    cornerData: function () {
      this.getCorner()
    }
  },
  methods: {
    getCorner() {
      if (this.cornerData.length > 0) {
        for (let i = 0; i < this.cornerData.length; i++) {
          if (this.cornerData[i].cornerID === 'C1') {
            this.c1 =
              this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY + '□'
          }
          if (this.cornerData[i].cornerID === 'C2') {
            this.c2 =
              this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY + '□'
          }
          if (this.cornerData[i].cornerID === 'C3') {
            this.c3 =
              '□' + this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY
          }
          if (this.cornerData[i].cornerID === 'C4') {
            this.c4 =
              '□' + this.cornerData[i].deltaX + '*' + this.cornerData[i].deltaY
          }
        }
      } else {
        this.c1 = ''
        this.c2 = ''
        this.c3 = ''
        this.c4 = ''
      }
    },
    transLabel(v) {
      let label = ''
      for (let l = 0; l < this.list.length; l++) {
        if (v === this.list[l].value) {
          label = this.list[l].label
        }
      }
      return label
    },
    getChart() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
      var chartDom = document.getElementById('defectScatterPlotChart')
      this.chart = echarts.init(chartDom)
      let legendList = []
      let seriesList = []
      let num = 0 // 计算点的数量，判断后续bursh是否需要延迟
      let delayTime = 0
      for (let i in this.defectMsg) {
        legendList.push(this.transLabel(i))
        let arr1 = []
        let obj = {}
        for (let j of this.defectMsg[i]) {
          let arr2 = []
          arr2.push(2600 - parseInt(j.ypos))
          arr2.push(2250 - parseInt(j.xpos))
          arr1.push(arr2)
          num++
        }
        obj.name = this.transLabel(i)
        obj.type = 'scatter'
        obj.data = arr1
        obj.symbolSize = 5
        seriesList.push(obj)
      }
      if (num <= 3000) {
        delayTime = 0
      } else if (3000 < num <= 7000) {
        delayTime = 1000
      } else if (7000 < num <= 10000) {
        delayTime = 2000
      } else {
        delayTime = 3000
      }
      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: legendList,
          textStyle: {
            fontSize: 9
          },
          itemWidth: 10 // 图例宽度
        },
        brush: {
          toolbox: ['rect', 'clear'],
          xAxisIndex: 0,
          throttleType: 'debounce',
          throttleDelay: delayTime
        },
        tooltip: {
          formatter: '{c},{a}'
        },
        grid: {
          x: 60,
          y: 60,
          x2: 20,
          y2: 60,
          borderWidth: 1
        },
        xAxis: {
          type: 'value',
          nameGap: 16,
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(0, 0, 0, 0.15)'
            }
          },
          axisLabel: {
            rotate: 45
          },
          max: 2600,
          min: 0,
          interval: 100
        },
        yAxis: {
          type: 'value',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(0, 0, 0, 0.15)'
            }
          },
          max: 2250,
          min: 0,
          interval: 100
        },
        series: seriesList
      }
      let that = this
      this.chart.on('brushSelected', function (params) {
        var brushed = []
        var brushComponent = params.batch[0]
        var total = 0
        var xLong = 0
        var yLong = 0
        if (params.batch[0].areas[0]) {
          xLong = parseInt(
            params.batch[0].areas[0].coordRange[0][1] -
              params.batch[0].areas[0].coordRange[0][0]
          )
          yLong = parseInt(
            params.batch[0].areas[0].coordRange[1][1] -
              params.batch[0].areas[0].coordRange[1][0]
          )
        }
        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
          var rawIndices = brushComponent.selected[sIdx].dataIndex.length
          total += rawIndices
          brushed.push(
            brushComponent.selected[sIdx].seriesName + ' : ' + rawIndices
          )
        }
        brushed.push('总计 : ' + total)
        that.chart.setOption({
          title: {
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            text: 'SELECTED DATA: \n' + brushed.join('\n'),
            right: params.batch[0].areas[0] ? '10%' : -100,
            bottom: params.batch[0].areas[0] ? 0 : -500,
            textStyle: {
              fontSize: 12,
              fontWeight: 'normal',
              color: '#fff'
            }
          },
          graphic: [
            {
              type: 'group',
              left: params.batch[0].areas[0]
                ? params.batch[0].areas[0].range[0][0]
                : -100,
              top: params.batch[0].areas[0]
                ? params.batch[0].areas[0].range[1][1] + 5
                : -100,
              children: [
                {
                  type: 'text',
                  z: 100,
                  style: {
                    fill: '#333',
                    width: 220,
                    overflow: 'break',
                    text: xLong + '*' + yLong,
                    font: '12px Microsoft YaHei'
                  }
                }
              ]
            }
          ]
        })
      })
      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>