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

xiyang#

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

阅读量458

点赞数 5

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

本文链接：https://blog.csdn.net/g841805/article/details/136887731

版权

ECharts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

<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(() => {
  init()
})
const init = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(document.getElementById('main'));
  // 绘制图表
  option.value = {
    title: {
      text: 'Waterfall'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      splitLine: { show: false },
      data: (function () {
        var list = [];
        for (var i = 1; i <= 11; i++) {
          list.push('Oct/' + i);
        }
        return list;
      })()
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'bar',
        stack: 'all',
        itemStyle: {
          normal: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
          },
          emphasis: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
          }
        },
        data: help
      },
      {
        name: 'positive',
        type: 'bar',
        stack: 'all',
        data: positive
      },
      {
        name: 'negative',
        type: 'bar',
        stack: 'all',
        data: negative,
        itemStyle: {
          color: '#f33'
        }
      }
    ]
  };
  myChart.value.setOption(option.value)
};
</script>
<style scoped>
.echart-style {
  width: 1000px;
  height: 900px;
  background: skyblue;
}
</style>