用vue3跑通echarts官网的案例：使用线图绘制近100万的纽约街道数据

这是年前实习单位的一个任务，要求是绘制人口密度图，参考的就是这个案例：echarts官网的案例：使用线图绘制近100万的纽约街道数据https://echarts.apache.org/examples/zh/editor.html?c=lines-ny

 怎么说呢，手里没有数据，也无法请求到他的uri（因为拒绝跨域），只有将他的数据先爬下来，然后请求本地就能用了，具体就不展示爬虫代码了。

<template>
  <div id="map" style="width:850px; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import { GeoComponent } from 'echarts/components';
import { LinesChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { defineComponent, onMounted } from "vue";

import world from '@/../public/static/json/world.json';
echarts.use([GeoComponent, LinesChart, CanvasRenderer]);

let ROOT_PATH = 'http://localhost:8080';

export default defineComponent({
  setup() {
    let CHUNK_COUNT = 31;
    let dataCount = 0;
    let myChart = null;
    function initMap() {
      const chartDom = document.getElementById('map');
      myChart = echarts.init(chartDom);
    }

    function fetchData(idx) {
      if (idx >= CHUNK_COUNT) {
        return;
      }
      let dataURL = ROOT_PATH + '/static/bin/links_ny_' + idx + '.bin';
      let xhr = new XMLHttpRequest();
      xhr.open('GET', dataURL, true);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function () {
        let rawData = new Float32Array(this.response);
        console.log('bin file ' + idx + ': ', rawData);
        let data = new Float64Array(rawData.length - 2);
        let offsetX = rawData[0];
        let offsetY = rawData[1];
        let off = 0;
        let addedDataCount = 0;
        for (let i = 2; i < rawData.length; ) {
          let count = rawData[i++];
          data[off++] = count;
          for (let k = 0; k < count; k++) {
            let x = rawData[i++] + offsetX;
            let y = rawData[i++] + offsetY;
            data[off++] = x;
            data[off++] = y;
            addedDataCount++;
          }
        }
        console.log('data' + idx + ': ', data);
        myChart.appendData({
          seriesIndex: 0,
          data: data
        });
        dataCount += addedDataCount;
        fetchData(idx + 1);
      };
      xhr.send();
    }

    function drawMap() {
      let option = {
        progressive: 20000,
        backgroundColor: '#111',
        geo: {
          center: [-74.04327099998152, 40.86737600240287],
          zoom: 130,
          map: 'world',
          roam: true, //支持拖拽缩放
          silent: true,
          itemStyle: {
            color: 'transparent',
            borderColor: 'rgba(255,255,255,0.1)',
            borderWidth: 1
          }
        },
        series: [
          {
            type: 'lines',
            coordinateSystem: 'geo',
            blendMode: 'lighter',
            dimensions: ['value'],
            data: new Float64Array(),
            polyline: true,
            large: true,
            roam : true,
            lineStyle: {
              color: 'orange',
              width: 0.5,
              opacity: 0.3
            }
          }
        ]
      };
      fetchData(0);
      option && myChart.setOption(option);
    }

    onMounted(()=>{
      echarts.registerMap("world", { geoJSON: world });
      initMap();
      console.log("init done")
      drawMap();
      console.log("draw map done")
    })

    return {
      dataCount,
      CHUNK_COUNT,
    }
  },
});


</script>

有空我会详细写一下这个经过的，先mark一下。