当前位置：首页 > VUE

vue实现气泡统计

2026-01-18 09:13:26VUE

Vue 实现气泡统计

气泡统计通常用于展示数据的分布或密度，常见于地图或散点图中。以下是基于 Vue 实现气泡统计的几种方法：

使用 ECharts 实现气泡图

ECharts 是一个强大的图表库，支持气泡图的绘制。安装 ECharts 后，可以通过配置选项实现气泡统计。

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

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

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    const option = {
      xAxis: {},
      yAxis: {},
      series: [{
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 5;
        },
        data: [
          [10, 20, 50],
          [15, 30, 30],
          [20, 25, 80]
        ],
        type: 'scatter'
      }]
    };
    chart.setOption(option);
  }
};
</script>

使用 D3.js 实现自定义气泡图

D3.js 提供了更灵活的定制能力，适合需要高度自定义的场景。

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

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

export default {
  mounted() {
    const svg = d3.select(this.$refs.svg);
    const data = [
      { x: 10, y: 20, r: 10 },
      { x: 15, y: 30, r: 15 },
      { x: 20, y: 25, r: 20 }
    ];

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

使用 Vue-Chartjs 快速实现气泡图

Vue-Chartjs 是 Chart.js 的 Vue 封装，适合快速集成。

<template>
  <bubble-chart :chart-data="chartData" :options="options"></bubble-chart>
</template>

<script>
import { Bubble } from 'vue-chartjs';

export default {
  extends: Bubble,
  data() {
    return {
      chartData: {
        datasets: [{
          label: 'Bubble Dataset',
          data: [
            { x: 10, y: 20, r: 5 },
            { x: 15, y: 30, r: 10 },
            { x: 20, y: 25, r: 15 }
          ],
          backgroundColor: 'rgba(75, 192, 192, 0.6)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          x: { beginAtZero: true },
          y: { beginAtZero: true }
        }
      }
    };
  }
};
</script>