瀑布图

最新推荐文章于 2025-06-29 09:08:03 发布

weixin_42670357

最新推荐文章于 2025-06-29 09:08:03 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： echart

本文链接：https://blog.csdn.net/weixin_42670357/article/details/100930142

echart 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了瀑布图的使用方法和应用场景，通过实例展示了如何在项目中集成瀑布图组件，帮助读者理解其在数据分析中的作用。

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

组件

<template>
<div class="chart" :style="{height:height/75+'rem',width:width}">
</div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    barObj: {
      type: Object
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400"
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    let _this = this;
    _this.init();
    window.addEventListener("resize", function() {
      _this.myChart.resize();
    });
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    init() {
      this.drawLine();
    },
    drawLine() {
      let self = this;
      self.myChart = echarts.init(this.$el);
      self.myChart.clear();
      let data = self.barObj;
      let list = [{
        name: "辅助",
        type: "bar",
        stack: "总量",
        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: data.data
      }];
      data.dataList.forEach(item => {
        list.push({
          name: item.name,
          type: "bar",
          stack: "总量",
          barWidth: 15,
          label: {
            normal: {
              show: item.isShow === undefined ? true : false,
              position: "top",
              fontSize: 10,
              color: "#000",
              formatter: val => {
                return val.data + "%";
              }
            }
          },
          data: item.data
        });
      });
      // 绘制图表
      self.myChart.setOption({
        title: {
          top: "6%",
          left: "2%",
          text: "(单位:%)",
          textStyle: {
            color: "#D4D4D5",
            fontSize: 10
          }
        },
        legend: {
          orient: "vertical",
          x: "54%",
          y: "center",
          itemWidth: 12,
          itemHeight: 12,
          icon: "rect",
          align: "left",
          data: data.legendData,
          itemGap: -10,
          formatter: name => {
            let list = data.legendData.filter(item => {
              return item.name === name;
            });
            let obj = list[0];
            return obj.add ?
              `{title|${name}} \n {value|${obj.value}} {txt|同比} {red|${obj.ratio}}` :
              `{title|${name}} \n {value|${obj.value}} {txt|同比} {green|${obj.ratio}}`;
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 12,
                color: "#191F25",
                padding: [0, 0, 18, 0]
              },
              value: {
                fontSize: 14,
                fontWeight: 700,
                color: "#191F25",
                padding: [0, 0, 4, 0]
              },
              txt: {
                fontSize: 12,
                lineHeight: 12,
                color: "#D3D4D4",
                padding: [0, 0, 4, 0]
              },
              red: {
                fontSize: 12,
                lineHeight: 12,
                fontWeight: "bold",
                color: "#FF3939",
                padding: [0, 0, 4, 0]
              },
              green: {
                fontSize: 12,
                lineHeight: 12,
                color: "#80C269",
                fontWeight: "bold",
                padding: [0, 0, 4, 0]
              }
            }
          }
        },
        grid: {
          left: "-6%",
          right: "49%",
          bottom: "16%",
          top: "24%",
          containLabel: true
        },
        color: data.color,
        xAxis: {
          type: "category",
          show: false
        },
        yAxis: {
          type: "value",
          show: false
        },
        series: list
      });
    }
  }
};
</script>
<style lang="scss" scoped>

</style>

使用

<template>
<div class="wrap">
      <bar-one :bar-obj=barObj></bar-one>
</div>
</template>

<script>
import barOne from "../components/chart/barOne";
export default {
  data() {
    return {
      barObj: {
        color: ["#3A2FA3", "#8E51A8", "#F7AB00", "#8ACF6B", "#E0E3E5"],
        legendData: [{
            name: "工矿仓储用地供应",
            value: "8,781",
            add: false,
            ratio: "↓7.31%"
          },
          {
            name: "商服用地供应",
            value: "1,739",
            add: false,
            ratio: "↓2.41%"
          },
          {
            name: "住宅用地供应",
            value: "8,346",
            add: true,
            ratio: "↑7.01%"
          },
          {
            name: "其他用地",
            value: "8,551",
            add: true,
            ratio: "↑60.21%"
          }
        ],
        data: [0, 69.59, 63.25, 32.84, 0],
        dataList: [{
            name: "土地",
            data: ["100", "", "", "", ""],
            isShow: false
          },
          {
            name: "工矿仓储用地供应",
            data: ["", "30.41", "", "", ""]
          },
          {
            name: "商服用地供应",
            data: ["", "", "6.34", "", ""]
          },
          {
            name: "住宅用地供应",
            data: ["", "", "", "30.42", ""]
          },
          {
            name: "其他用地",
            data: ["", "", "", "", "31.26"]
          }
        ]
      },
    };
  },
  methods: {},
  mounted() {},
  directives: {},
  components: {
    barOne
  }
};
</script>

<style lang="scss" scoped>
</style>

在这里插入图片描述