ECharts实现瀑布图

最新推荐文章于 2025-03-27 00:18:40 发布

麦小迪lxx

最新推荐文章于 2025-03-27 00:18:40 发布

阅读量410

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/MD911442406/article/details/146055289

版权

ECharts 瀑布图（Waterfall Chart）本质上是堆叠柱状图 (`bar` 类型)

瀑布图适合展示累计过程，比如：

项目预算逐步消耗
收入和支出逐步影响总资产
数据逐步变化趋势

ECharts 瀑布图原理

ECharts 没有内置瀑布图类型，而是基于堆叠柱状图 (bar 类型)模拟实现：

第一组数据是“隐藏柱”（透明），起到“撑开”位置的作用
第二组数据是真正的每个阶段的变化值

示例代码：Vue 3 版本

<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chartRef = ref();

onMounted(() => {
  const myChart = echarts.init(chartRef.value);

  const option = {
    title: { text: '项目资金流向瀑布图' },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: (params) => {
        const item = params[1] || params[0];
        return `${item.name}<br/>${item.seriesName}: ${item.value}`;
      }
    },
    xAxis: {
      type: 'category',
      data: ['启动资金', '产品研发', '市场推广', '销售收入', '运维费用', '净利润']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '辅助',
        type: 'bar',
        stack: '总量',
        itemStyle: { borderColor: 'transparent', color: 'transparent' },
        data: [0, 100, 60, 0, 30, 0]
      },
      {
        name: '收入/支出',
        type: 'bar',
        stack: '总量',
        label: { show: true, position: 'top' },
        data: [100, -40, -20, 60, -30, 70]
      }
    ]
  };

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

关键点解析

关键	说明
`stack: '总量'`	让两组数据叠加
`辅助系列`	透明柱（起到撑开位置的作用）
`收入/支出系列`	真正显示的变化数据（可正可负）
`formatter`	自定义 tooltip 只显示变化值