vue3加echarts，绘制二维空间中的矩形分布。图中有许多蓝色的直线，形成了一个网格状的结构。横轴表示X轴，范围从-60000到60000，纵轴表示Y轴，范围从0到100000。整体上，这个图形呈现出一种规则的排列，用于表示数据的分布或区域划分。

在 Vue3 中结合 ECharts，你可以使用 `echarts-gl` 模块来创建二维空间中的矩形分布，因为 ECharts 的原生模块不太适合这种复杂的三维场景。首先，你需要安装并引入必要的库：

npm install echarts@latest echarts-gl

然后，在 Vue 组件中，你可以这样做：

<template>
  <div id="chartContainer"></div>
</template>

<script>
import * as echarts from 'echarts';
import { GridModel } from 'echarts-gl';

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chartContainer'));

      // 创建一个二维空间的 grid model
      const gridModel = new GridModel({
        xRange: [-60000, 60000],
        yRange: [0, 100000],
        width: 800, // 设置视口宽度
        height: 600, // 设置视口高度
        cellSize: 10, // 矩形大小
        lineWidth: 2, // 网格线粗细
        color: 'blue', // 蓝色网格线颜色
      });

      // 渲染网格
      chart.setOption({
        baseLayer: {
          type: 'grid',
          data: gridModel.getCells(),
          itemStyle: {
            normal: {
              lineColor: gridModel.getLineColor(), // 使用 gridModel 计算的颜色
              lineWidth: gridModel.getLineWidth(), // 使用 gridModel 计算的宽度
            },
          },
        },
      });
    },
  },
};
</script>

在这个例子中，我们初始化了一个 ECharts 实例，并通过 `GridModel` 来生成网格。`getCells()` 方法会返回所有矩形的坐标信息，而 `getLineColor()` 和 `getLineWidth()` 则分别返回对应网格线的颜色和宽度。