Echarts 柱状图重叠展示 总量和部分量

文章目录

• 前言
• 一、效果展示
• 二、代码介绍
• 三、完整代码
• 总结

---

前言

基于vue2+Echarts 柱状图重叠展示 总量和部分量

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果展示

二、代码介绍

1. 首先使用 echarts.init 方法初始化一个 echarts 实例 fullScreen，并传入一个 DOM 元素（通过 this.$refs.WireRod 获取）作为渲染容器。

2. 通过 await selectDataWireRod() 获取数据，并对数据进行处理，提取出需要的值 ZDD、ZKC、SUM、invRedNum、invOrangeNum、invYellowNum。

3. 定义了一个 option 对象，包括图表的标题、提示框、图例、坐标轴、系列等配置。

4. 在 series 中定义了几个不同类型的数据系列，包括"当前库存"、"未发订单"、"总库存"，以及三个自定义的安全库存线条系列。

5. 设置了图表的样式、颜色、柱状图宽度等属性。

6. 调用 fullScreen.setOption(option) 将配置好的选项应用到图表中。

7. 监听窗口大小变化事件，实现图表的自适应。

8. 监听点击事件，触发自定义事件。

9. 重要点：属性  stack: "x",和  barGap: "-100%",  柱状图宽度一定要固定。

三、完整代码

盘条代码如下  单独封装基本都差不多（示例）：

<template>

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

</template>

   

    <script>

import echarts from "echarts";

import { selectDataWireRod } from "@/api/MMZ/MMZ410";

export default {

  data() {

    return {};

  },

  mounted() {

    this.Echarts();

  },

  methods: {

    async Echarts() {

      const fullScreen = echarts.init(this.$refs.WireRod);

      let data = await selectDataWireRod();

      let list = [];

      let ZDD = "";

      let ZKC = "";

      let SUM = "";

      let invRedNum = ""; // 第一组警戒线值

      let invOrangeNum = ""; // 第二组警戒线值

      let invYellowNum = ""; // 第三组警戒线值

      if (data.data.code == 200) {

        list = data.data.data.Total;

      }

      ZDD = list[0].ZDD;

      ZKC = list[0].ZKC;

      SUM = list[0].SUM;

      invRedNum = list[0].invRedNum;

      invOrangeNum = list[0].invOrangeNum;

      invYellowNum = list[0].invYellowNum;

      var option = {

        title: {

          text: "盘条",

          textStyle: {

            fontWeight: "normal",

            fontSize: 21,

          },

          left: "15%",

        },

        tooltip: {

          trigger: "axis", //触发类型。[ default: 'item' ] :数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用;'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

          axisPointer: {

            lineStyle: {

              color: "#57617B",

            },

          },

        },

        legend: {

          data: ["当前库存", "未发订单"],

        },

        grid: {

          left: "3%", //grid 组件离容器左侧的距离。

          right: "4%", //grid 组件离容器右侧的距离。

          bottom: "3%", //grid 组件离容器下侧的距离。

          containLabel: true, //grid 区域是否包含坐标轴的刻度标签[ default: false ]

        },

        xAxis: {

          data: ["盘条"],

        },

        yAxis: {

          type: "value",

          name: "（单位：吨）", //坐标轴名称。

          splitLine: { show: false },

        },

        series: [

          {

            name: "当前库存",

            data: [ZKC],

            type: "bar",

            stack: "x",

            yAxisIndex: 0,

            color: "#409EFF",

            barWidth: "50px",

            itemStyle: {

              normal: {

                color: function (params) {

                  if (

                    Number(params.value) < Number(invRedNum)

                  ) {

                    return "#F56C6C";

                  } else if (

                    Number(params.value) <

                    Number(invOrangeNum)

                  ) {

                    return "#E6A23C";

                  } else if (

                    Number(params.value) <

                    Number(invYellowNum)

                  ) {

                    return "yellow";

                  } else {

                    return "#409EFF";

                  }

                },

              },

            },

          },

          {

            name: "未发订单",

            data: [ZDD],

            type: "bar",

            stack: "x",

            yAxisIndex: 0,

            color: "#ccc",

            barWidth: "50px",

          },

          {

            name: "总库存",

            type: "bar",

            data: [SUM],

            smooth: false,

            // stack: "x",

            yAxisIndex: 0,

            barWidth: "50px",

            barGap: "-100%",

            z: -1,

            color: "#fff",

            itemStyle: {

              normal: {

                borderColor: "#ccc", // 虚线颜色

                borderType: "dashed", // 虚线样式

              },

            },

          },

          {

            type: "custom",

            name: "五天安全库存",

            renderItem: function renderItem(param, api) {

              var point = api.coord([api.value(0), api.value(1)]);

              return {

                type: "line",

                transition: ["shape"],

                shape: {

                  x1: point[0] - 25,

                  x2: point[0] + 25,

                  y1: point[1],

                  y2: point[1],

                },

                style: api.style({

                  stroke: api.visual("color"),

                  lineWidth: 3,

                }),

              };

            },

            itemStyle: {

              borderType: "soild",

              normal: {

                color: "#F56C6C",

              },

            },

            z: 999,

            data: [invRedNum],

          },

          {

            type: "custom",

            name: "七天安全库存",

            renderItem: function renderItem(param, api) {

              var point = api.coord([api.value(0), api.value(1)]);

              return {

                type: "line",

                transition: ["shape"],

                shape: {

                  x1: point[0] - 25,

                  x2: point[0] + 25,

                  y1: point[1],

                  y2: point[1],

                },

                style: api.style({

                  stroke: api.visual("color"),

                  lineWidth: 3,

                }),

              };

            },

            itemStyle: {

              borderType: "soild",

              normal: {

                color: "#E6A23C",

              },

            },

            z: 999,

            data: [invOrangeNum],

          },

          {

            type: "custom",

            name: "十天安全库存",

            renderItem: function renderItem(param, api) {

              var point = api.coord([api.value(0), api.value(1)]);

              return {

                type: "line",

                transition: ["shape"],

                shape: {

                  x1: point[0] - 25,

                  x2: point[0] + 25,

                  y1: point[1],

                  y2: point[1],

                },

                style: api.style({

                  stroke: api.visual("color"),

                  lineWidth: 3,

                }),

              };

            },

            itemStyle: {

              borderType: "soild",

              normal: {

                color: "yellow",

              },

            },

            z: 999,

            data: [invYellowNum],

          },

        ],

      };

      fullScreen.setOption(option);

      window.addEventListener("resize", function () {

        fullScreen.resize();

      });

      fullScreen.on("click", (params) => {

        this.$emit("custom-event", true);

      });

    },

  },

};

</script>

   

    <style scoped>

</style>

---

总结

总体来说，这段代码实现了一个基于 Echarts 的图表展示功能，展示了盘条的当前库存、未发订单、总库存，并标注了三个不同颜色的安全库存线，当前库存、未发订单基于总库存之中。