生产数据

src/views/qualityManagement/components/defectScatterPlotChart.vue

@@ -34,7 +34,6 @@ export default {
   },
   data() {
     return {
-      chartDom: '',
       chart: '',
       chartHeight: tableHeight(446),
       list: [
@@ -120,8 +119,8 @@ export default {
       ) {
         this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
       }
-      this.chartDom = document.getElementById('defectScatterPlotChart')
-      this.chart = echarts.init(this.chartDom)
+      var chartDom = document.getElementById('defectScatterPlotChart')
+      this.chart = echarts.init(chartDom)
       let legendList = []
       let seriesList = []
       for (let i in this.defectMsg) {
@@ -130,8 +129,8 @@ export default {
         let obj = {}
         for (let j of this.defectMsg[i]) {
           let arr2 = []
-          arr2.push(parseInt(j.xpos))
           arr2.push(parseInt(j.ypos))
+          arr2.push(parseInt(j.xpos))
           arr1.push(arr2)
         }
         obj.name = this.transLabel(i)
@@ -169,6 +168,10 @@ export default {
           },
           itemWidth: 10 // 图例宽度
         },
+        brush: {
+          toolbox: ['rect', 'clear'],
+          xAxisIndex: 0
+        },
         grid: {
           x: 60,
           y: 60,
@@ -187,7 +190,10 @@ export default {
             lineStyle: {
               color: 'rgba(0, 0, 0, 0.15)'
             }
-          }
+          },
+          max: 2600,
+          min: 0,
+          interval: 100
         },
         yAxis: {
           type: 'value',
@@ -201,30 +207,76 @@ export default {
             lineStyle: {
               color: 'rgba(0, 0, 0, 0.15)'
             }
-          }
+          },
+          max: 2250,
+          min: 0,
+          interval: 100
         },
         series: seriesList
-        // 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
-        //   }
-        // ]
       }
+      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)
     }
   }