当前位置：首页 > VUE

vue实现点密度图

2026-01-20 14:17:37VUE

Vue 实现点密度图的方法

点密度图（Dot Density Map）是一种通过点的密集程度展示地理数据分布的可视化方式。在 Vue 中可以通过以下方法实现：

使用第三方库（推荐）

使用成熟的图表库如 echarts 或 leaflet 可以快速实现点密度图。

安装依赖

npm install echarts

代码示例

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {},
        visualMap: {
          min: 0,
          max: 100,
          inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
          }
        },
        series: [{
          type: 'scatter',
          data: [
            [120, 30, 10],
            [121, 31, 20],
            // 更多数据点...
          ],
          symbolSize: function (val) {
            return val[2] * 2;
          }
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

使用 Canvas 或 SVG 自定义绘制

如果需要更灵活的定制，可以直接使用 Canvas 或 SVG 绘制。

Canvas 示例

<template>
  <canvas ref="canvas" width="600" height="400"></canvas>
</template>

<script>
export default {
  props: {
    data: Array, // 数据格式: [{x, y, value}]
  },
  mounted() {
    this.drawDots();
  },
  methods: {
    drawDots() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      this.data.forEach(item => {
        const radius = Math.sqrt(item.value) * 2;
        ctx.beginPath();
        ctx.arc(item.x, item.y, radius, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
        ctx.fill();
      });
    }
  }
};
</script>

结合地图库实现地理点密度

如果需要展示地理坐标的点密度，可以结合 leaflet 或 mapbox。

Leaflet 示例

<template>
  <div id="map" style="height: 400px;"></div>
</template>

<script>
import L from 'leaflet';

export default {
  mounted() {
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    const points = [
      { lat: 51.5, lng: -0.1, value: 10 },
      // 更多数据点...
    ];

    points.forEach(point => {
      L.circleMarker([point.lat, point.lng], {
        radius: point.value / 2,
        fillColor: '#3388ff',
        color: '#000',
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      }).addTo(map);
    });
  }
};
</script>