当前位置：首页 > VUE

vue实现河流图

2026-02-20 00:09:00VUE

Vue 实现河流图的方法

河流图（也称为流图或桑基图）通常用于展示数据流动或比例变化。在 Vue 中实现河流图可以通过以下方法完成。

使用 ECharts 实现河流图

ECharts 是一个强大的可视化库，支持河流图（桑基图）的绘制。以下是具体实现步骤：

安装 ECharts 依赖：

npm install echarts --save

在 Vue 组件中引入 ECharts 并初始化河流图：

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

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        series: [{
          type: 'sankey',
          data: [
            { name: 'A' },
            { name: 'B' },
            { name: 'C' },
            { name: 'X' },
            { name: 'Y' },
            { name: 'Z' }
          ],
          links: [
            { source: 'A', target: 'X', value: 5 },
            { source: 'A', target: 'Y', value: 3 },
            { source: 'B', target: 'X', value: 8 },
            { source: 'B', target: 'Z', value: 4 },
            { source: 'C', target: 'Y', value: 6 },
            { source: 'C', target: 'Z', value: 2 }
          ]
        }]
      };

      myChart.setOption(option);
    }
  }
};
</script>

使用 D3.js 实现河流图

D3.js 提供了更灵活的底层控制，适合定制化需求较高的场景。

安装 D3.js 依赖：

npm install d3 --save

在 Vue 组件中使用 D3.js 绘制河流图：

vue实现河流图

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

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const svg = d3.select(this.$refs.svg);
      const width = +svg.attr('width');
      const height = +svg.attr('height');

      const data = {
        nodes: [
          { name: 'A' },
          { name: 'B' },
          { name: 'C' },
          { name: 'X' },
          { name: 'Y' },
          { name: 'Z' }
        ],
        links: [
          { source: 0, target: 3, value: 5 },
          { source: 0, target: 4, value: 3 },
          { source: 1, target: 3, value: 8 },
          { source: 1, target: 5, value: 4 },
          { source: 2, target: 4, value: 6 },
          { source: 2, target: 5, value: 2 }
        ]
      };

      const sankey = d3.sankey()
        .nodeWidth(15)
        .nodePadding(10)
        .size([width, height]);

      const graph = sankey(data);

      const color = d3.scaleOrdinal(d3.schemeCategory10);

      svg.append('g')
        .selectAll('.link')
        .data(graph.links)
        .enter()
        .append('path')
        .attr('class', 'link')
        .attr('d', d3.sankeyLinkHorizontal())
        .attr('stroke-width', d => Math.max(1, d.width));

      svg.append('g')
        .selectAll('.node')
        .data(graph.nodes)
        .enter()
        .append('g')
        .attr('class', 'node')
        .attr('transform', d => `translate(${d.x0},${d.y0})`);

      svg.selectAll('.node')
        .append('rect')
        .attr('height', d => d.y1 - d.y0)
        .attr('width', sankey.nodeWidth())
        .attr('fill', d => color(d.name));

      svg.selectAll('.node')
        .append('text')
        .attr('x', -6)
        .attr('y', d => (d.y1 - d.y0) / 2)
        .attr('dy', '.35em')
        .attr('text-anchor', 'end')
        .text(d => d.name);
    }
  }
};
</script>