Vue使用echarts散点图在区域内标点

<template>
  <div style="width: 100%;height: 100%;border: 1px solid #dee1e6;background-color: #f1f3f4;">
    <div id="map" style="width: 100%;height:100%;"></div>
  </div>
</template>

// 循环界面
let xLabel = []
let yLabel = []
for (let i = -49; i <= 50; i++) {
          xLabel.push(i)
        }
        for (let y = -99; y <= 100; y++) {
          yLabel.push(y)
        }

series.push({
    symbolSize: 10,
          color: 'red',
          name: this.showData[2],
          // data下面是计算出的，就是楞加
          data: [[this.showData[0] / 1000 + 49, this.showData[1] / 1000 + 99]],
          type: 'scatter',
})

let option = {
          grid: {   // 因为就是个图片，模拟玻璃，就把绘制的边距设置为0，绘制区域充满整个屏幕
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          },
          xAxis: { 
            show: false,
            data: xLabel
          },
          yAxis: {
            show: false,
            data: yLabel
          },
          series,
        }
        this.charts = echarts.init(document.getElementById('map'))
        this.charts.setOption(option, true)
        // 下面这个点击事件是当我点击图上的点的是后触发的点击事件
        this.charts.on('click', (params) => {
          if (params.componentSubType === 'scatter') {
            console.log('pointClick ----> ', params.seriesName)
          }
})