VUE3 ECharts 实现阶梯瀑布图（附源码和效果）

_xiyang

于 2024-03-20 20:22:54 发布

阅读量728

点赞数 5

分类专栏： ECharts 文章标签： echarts vue.js 前端

本文链接：https://blog.youkuaiyun.com/g841805/article/details/136887731

版权

文章介绍了如何在Vue.js应用中利用ECharts库创建一个瀑布图，展示数据的正负变化，包括初始化图表、配置选项和数据处理过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="main" class="echart-style">
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
let myChart = ref()
let option = ref({})
let data = ref([900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]);
let help: any = [];
let positive: any = [];
let negative: any = [];
for (let i = 0, sum = 0; i < data.value.length; ++i) {
  if (data.value[i] >= 0) {
    positive.push(data.value[i]);
    negative.push('-');
  } else {
    positive.push('-');
    negative.push(-data.value[i]);
  }

  if (i === 0) {
    help.push(0);
  } else {
    sum += data.value[i - 1];
    if (data.value[i] < 0) {
      help.push(sum + data.value[i]);
    } else {
      help.push(sum);
    }
  }
}
onMounted(() =>