vue3+echarts5+ts setup语法糖实现全球1000w GPS点可视化散点图

1. 引入echarts5

 pnpm install echarts --save

2. 在需要展示散点图的页面引入echarts

import * as echarts from 'echarts'

3. 在项目根目录 public 文件夹中引入 geo文件

V5移除了内置的geoJSON（原先在echarts/map文件夹下），这里引用的中国和世界地图的geoJSON是我从老的版本中复制出来的

git clone https://gitee.com/potatocoder/geo_json.git 

4. 在onMounted中调用onload方法渲染echarts

代码如下：

<template>
   <div class="center-body">
       <div id="map" ref="chartRef" style="width: 100%; height: 100%" class="map" />
   </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import WorldGeo from '../../../../public/monitor/geoJSON_world.json'
// import '../../../../public/monitor/geoJSON_china.json'
import { echarsGet } from '@/api/echars'
defineOptions({
  name: 'Global'
})

// 全球散点地图
const chartRef = ref()
let myChart
function onload() {
  if (myChart != null && myChart != '' && myChart != undefined) {
    myChart.dispose() //销毁
  }
  // 将自定义的全球地理数据注册到 ECharts 中
  echarts.registerMap('world', WorldGeo as any)
  myChart = echarts.init(chartRef.value)

  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '10000000 GPS Points',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'world',
      roam: true,
      label: {
        emphasis: {
          show: false
        }
      },
      silent: true,
      itemStyle: {
        normal: {
          areaColor: '#153777',
          borderColor: '#4F8CCD'
        },
        emphasis: {
          areaColor: '#2a333d'
        }
      }
    },
    series: [
      {
        name: '弱',
        type: 'scatterGL',
        progressive: 1e6,
        coordinateSystem: 'geo',
        symbolSize: 2,
        zoomScale: 0.002,
        blendMode: 'lighter',
        large: true,
        itemStyle: {
          color: 'rgb(20, 15, 2)'
        },
        postEffect: {
          enable: true
        },
        silent: true,
        dimensions: ['lng', 'lat'],
        left: 0,
        right: 0,
        data: new Float32Array()
      }
    ],
    grid: {
      top: '0px',
      left: '0px',
      right: '0px',
      bottom: '0px',
      containLabel: true
    }
  }
  // 通过接口请求千万条数据
  fetchData(0, myChart)
  // 放大缩小窗口自适应屏幕，调用前使用nextTick()可在初始化页面就自适应
  window.addEventListener('resize', function () {
    myChart.resize()
  })
  myChart.setOption(option)
}

// 请求echarts接口返回定位数据
function fetchData(idx, myChart) {
  const CHUNK_COUNT = 230
  if (idx >= CHUNK_COUNT) {
    return
  }
  // 调用api获取数据，因为本地调用echars接口请求千万条数据会跨域，自己配置了下
  const promise = echarsGet(idx)
  promise
    .then((res) => {
      const rawData = new Int32Array(res)
      const data = new Float32Array(rawData.length)
      for (let i = 0; i < 10; i += 2) {
        data[i] = rawData[i + 1] / 1e7
        data[i + 1] = rawData[i] / 1e7
      }
      myChart.appendData({
        seriesIndex: 0,
        data
      })
      // 数据太大会一直调用，我这里先请求30次，每次请求会返回40万条数据
      if (idx < 30) {
        fetchData(idx + 1, myChart)
      }
    })
    .finally(() => {})
}

onMounted(() => {
  // 加载中间世界地图
  nextTick(() => {
    onload()
  })
})
</script>

<style lang="less" scoped>
@import '@/styles/style/monitor.css';
</style>

5. 因为数据请求接口调用的外部地址'https://echarts.apache.org/examples'，且请求头需要将responseType设置为'arraybuffer'，因此在vue项目中需要在请求的时候配置请求头和设置允许跨域：

'@/api/echars'请求页面配置如下：

import { request } from '@/utils/request'

export function echarsGet(idx) {
  return request(
    {
      url: `/echars/data/asset/data/gps/gps_${idx}.bin`,
      method: 'get'
    },
    {
      isGetDataDirectly: false
    }
  )
}

 echarts接口请求前需要将responseType设置为'arraybuffer'，请求拦截处理如下： 

 请求地址中以/echars开头的，设置允许跨域请求地址为'https://echarts.apache.org/examples'

注意： 

option中geo的map名称必须与注册时registerMap('world', WorldGeo as any)的名称相对应