当前位置：首页 > VUE

vue实现气泡统计

2026-02-19 01:39:43VUE

Vue 实现气泡统计的方法

气泡统计通常用于展示数据的分布或密度，常见于地图、图表等场景。以下是几种在 Vue 中实现气泡统计的方法：

使用 ECharts 实现气泡图

安装 ECharts 和 Vue-ECharts：

npm install echarts vue-echarts

在 Vue 组件中使用：

<template>
  <v-chart :option="chartOption" />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { ScatterChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  ScatterChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  components: {
    VChart
  },
  data() {
    return {
      chartOption: {
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5;
            },
            type: 'scatter',
            data: [
              [10, 20, 100],
              [15, 30, 200],
              [20, 40, 300]
            ]
          }
        ]
      }
    };
  }
};
</script>

使用 D3.js 实现气泡图

安装 D3.js：

npm install d3

Vue 组件示例：

<template>
  <div ref="bubbleChart"></div>
</template>

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

export default {
  mounted() {
    this.drawBubbleChart();
  },
  methods: {
    drawBubbleChart() {
      const data = [
        { x: 10, y: 20, r: 30 },
        { x: 40, y: 60, r: 20 },
        { x: 70, y: 80, r: 50 }
      ];

      const svg = d3.select(this.$refs.bubbleChart)
        .append('svg')
        .attr('width', 500)
        .attr('height', 500);

      svg.selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        .attr('cx', d => d.x * 5)
        .attr('cy', d => d.y * 5)
        .attr('r', d => d.r)
        .attr('fill', 'steelblue');
    }
  }
};
</script>

使用 Leaflet 实现地图气泡统计

安装 Leaflet：

npm install leaflet

Vue 组件示例：

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

<script>
import L from 'leaflet';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      const markers = [
        { lat: 51.5, lng: -0.1, count: 100 },
        { lat: 51.51, lng: -0.08, count: 200 },
        { lat: 51.49, lng: -0.07, count: 50 }
      ];

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

使用 Chart.js 实现气泡图

安装 Chart.js：

npm install chart.js

Vue 组件示例：

<template>
  <canvas ref="bubbleChart"></canvas>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const ctx = this.$refs.bubbleChart.getContext('2d');
      new Chart(ctx, {
        type: 'bubble',
        data: {
          datasets: [
            {
              label: 'Dataset 1',
              data: [
                { x: 20, y: 30, r: 15 },
                { x: 40, y: 10, r: 10 },
                { x: 30, y: 20, r: 20 }
              ],
              backgroundColor: 'rgba(255, 99, 132, 0.5)'
            }
          ]
        },
        options: {
          scales: {
            x: {
              type: 'linear',
              position: 'bottom'
            }
          }
        }
      });
    }
  }
};
</script>