echerts横向一根柱子不同参数不同色的斜切式柱状图的做法

思路：网上搜寻了许久，最终参照官网的斜切样式制作出来了，这种方法采用的是遮盖原有柱状图顶端造成视觉上看起来是斜切的效果。目前这是我能想到最好的办法了，也欢迎大家提供其他的方法。

参照echerts图表网：

echarts图表集

效果图：

完整源代码：

<template>
  <!-- 横向柱状图 -->
  <div class="index" ref="lineStyle"></div>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: {
    obj: {
      type: Object,
      default() {
        return {
          ydata: ["第一天", "第二天", "第三天"],
          legend: ["双床房", "大床房", "商务房"],
          barData: [
            {
              name: "双床房",
              data: [10, 5, 20]
            },
            {
              name: "大床房",
              data: [3, 6, 9]
            },
            {
              name: "商务房",
              data: [5, 4, 3]
            }
          ],
          legendDate: "center" //对齐方式
        };
      }
    },
    // 渐变色从深色到浅色
    colors: {
      type: Object,
      default() {
        return {
          colors: [
            { color1: "#0F949B", color2: "#1bf3fe" },
            { color1: "#1794FF", color2: "#79b2f8" },
            { color1: "#19C278", color2: "#90f9bb" }
          ]
        };
      }
    }
  },
  data() {
    return {
      serData: [],
      myChart1: ""
    };
  },
  computed: {},
  watch: {
    data: {
      handler() {
        this.$nextTick(() => {
          this.init();
        });
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.init();
  },
  beforeDestroy() {},
  methods: {
    init() {
      // console.log(this.obj.legendDate);
      if (this.myChart1) this.myChart1.dispose();
      let ref = this.$refs.lineStyle;
      this.myChart1 = echarts.init(ref);

      let arr = []; //存储房间数数组
      let arrData = []; //大床房数据
      let list = []; //双床房数据
      let room = []; //存储房间数据

      this.obj.barData.forEach((item, i) => {
        // 计算房间总数
        arr.push(this.sum(item.data));
        room.push(item.name);

        this.serData.push(
          {
            name: item.name,
            type: "bar",
            stack: "all",
            // color: item.color, //柱状图颜色
            barWidth: 14,
            data: item.data,
            showBackground: true,
            backgroundStyle: {
              color: "#1344791a"
            }
          },
            //斜切效果设置
          {
            type: "pictorialBar",
            data: item.data.map((items, j) => {
              if (i > 0 && item.name == room[i]) {
                arrData.push(items + list[j]);
                if (item.name == "商务房") {
                  return items + arrData[j];
                }
                return items + list[j];
              } else {
                list.push(items);
                return items;
              }
            }),
            xAxisIndex: 0,
            yAxisIndex: 0,
            zlevel: 99,
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAACXBIWXMAAAsTAAALEwEAmpwYAAANd2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTA5LTEyVDEwOjU3OjI5KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wOS0xMlQxMToxNzo0OCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wOS0xMlQxMToxNzo0OCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NTc2ZjgwOS1hZDcyLWJlNDYtOWVlMi01Yjc2ZTY5NmZiOGUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODBlNmNkYTUtZmExYi0xNTQzLWFhNzktYTI0YzUxMzU4NDEzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ODBlNmNkYTUtZmExYi0xNTQzLWFhNzktYTI0YzUxMzU4NDEzIj4gPHBob3Rvc2hvcDpEb2N1bWVudEFuY2VzdG9ycz4gPHJkZjpCYWc+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjBlNmFkMzNhLTA4NTQtZDU0My1iNDRmLTc1NjU0YTllOTc5NjwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyZTk5NDVhNS00MDYyLWFkNDgtODIxYS1lZjBmYjk2M2NlMmE8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NDVmYTAzYmMtMjIzYS02MjQ5LWJjYTktM2Y0NzYyOTc1YzkxPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjQ5NzI2Mzc1LThlYWYtMzQ0Yy1hZWZlLWFmMzhiODgzM2RiMTwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1MDk1ZGI4Zi1jNzhhLTBkNGItYWUzYi05Njc1MmVmZjYwY2M8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NWFmMjQ1MjgtOTgwNC0xMWViLWI5Y2MtOWRlMzRhYTk0NzgyPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYwYTNjNGQ3LTJhOTctNWY0YS05ZmUxLTQ2MWJjZDNjM2YwMDwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo3NmE4M2NiYS1jMDI2LWFlNGYtOThiZi03ODYzNjQyNjRiZWE8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6N2UzN2M3YWQtOGJmNi0xZjRhLTljM2EtZGI5ODZhMmE1Y2UxPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjg1ODljZDg5LTI4MTgtNzU0Yy1iYzMxLWYyOTllYmMzNTVmNzwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMGZmZDEzMy00MmQzLTQ1NGMtOTE0OS0wYzBlMWU4ZjZiNDk8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6Y2ZlMDZjNmEtNTkxNC1hNDQwLWI1M2QtMTcxMzRlZjU4YmVhPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRjMTRhNTY3LTNhMzEtNGU0ZS04MzVlLWRkZjYxYTc1ODEwMTwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmOTdiODc1My1kMTUwLWQzNGYtOGJkMy04NmE2N2JlN2MyZTM8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOjA4NzhmNzk4LWFhNWItZjY0Yy05NGYxLTE2MWEzNmFkMzhiODwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6NzkwZDBmMTAtOThiNC04MTQyLThlOWUtYTcyMDI5YjlkZWVkPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDo3RUUyNEQ2NzJDNjgxMUVEQjgzNTg0MkY5REY0ODA3MDwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6N0VFMjRENkIyQzY4MTFFREI4MzU4NDJGOURGNDgwNzA8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOjdjYjU4ZDU3LTYyZTItYmI0OC1iNzMzLTY0OWM3ZmFlNzBjYTwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6OGY5YWY5N2QtMzc2MC00YTQ0LThiMDItYjZmZDk3NzdmYzFjPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDo5MEMzRjhEQjU5MjgxMUVEQkU0N0E4NEU5RDRDQjEyODwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6YmQyNmMzMDEtMTBiMS04YjQyLWE3OTItMWFjZmIzNDFhZDlkPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDpjMGI0NWJiNi1mMmU1LWZiNDgtOTI2Mi04ZDJiYWRlZTMzYzA8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOmMzY2YwMzhhLTg3MjItY2I0ZC1hYjBlLTBiMWJhZWU1MWJhZjwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6Y2NjN2M2ZTYtM2FiOC0zYjRhLWE5OGMtMzY0YjNlZGQxM2VjPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDpkMmFkYTk1ZC0xZjcwLWNkNGQtYWRjZi1mZDA1NTYwNzA3MDI8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOmViNjQwZTFmLTkxNDgtZWI0MS04MjNlLTE5MDUwMzhkYjdlYzwvcmRmOmxpPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjgwZTZjZGE1LWZhMWItMTU0My1hYTc5LWEyNGM1MTM1ODQxMyIgc3RFdnQ6d2hlbj0iMjAyMy0wOS0xMlQxMDo1NzoyOSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NTc2ZjgwOS1hZDcyLWJlNDYtOWVlMi01Yjc2ZTY5NmZiOGUiIHN0RXZ0OndoZW49IjIwMjMtMDktMTJUMTE6MTc6NDgrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7E/Bf0AAACe0lEQVRIiZWUXU/UQBRAz522tCwfGyTxxZiIRoUgYqLGN3+Ef8uf5ZvBBAVUjKImvvgACWbRdvtxfehMd3YpZLaPTXrm5PTekdta4Z74tDZADKTAAFgF1oD1ai16jWGbkEf5GZ/Vr8zMawEMkAAZsAQMNZI7GLaCwIDU+hbIOnh8WouFR5fgmby0h4bBC30HJP4HzjoGFix8GRhqwrNQMMqpyfUXINfBF4ElNdzUSDaCrUs9cscY6E3ifuiyZua5fR/0mLF+ACqgcuZ9SVrzJHBCAJRzKfQEKICyD+7MFzHc0FjuhrKl1GNgBPwDcnNFkgwYNJl5Yg8Mg491H/gL5MDYXGk9f5KRKfTYgxez8ElvYaix3Au2rvQzXhJsc5fErb1NIrv2sDB4OyUXFl5gs/jWkyQL8igUjHJhCv3oWY+xo3i5tzDUSO4HW1f6BWWE9zMdvC/JDkIaDB/rAW0SBy59uD8lA01kJxSMkptCDz3rwsKby72FVY3nTvIHb0po1792d3dn3aSyjbAYDC/1wFp3UwLU2IsrYTLfA12Qx6FglMLkHdwlqSy8MUwvzorG8iDYutavKOeetUvSQDuGnXWTyhbCUjB8MiV+EgdXw/Ti7IaCgdLk+p7+JFqtRzPwWB4GW1f6zSbJ8RbHWUObpZ3tVDYRVoLhJYdMJ/F7d/C293xJKpM3+0yPYImXxDdf1kQ2g60rPaHh7DprB081lQ2EYTC85IhJkt7eDh418ywO1JI3e9Ddgr1JHFw0Cb+7pea7NPz2zHutAUyTyi2E9WB4qXvAuTW/MgmA0UyehoKBRgp9Y+FueXqTtPBIXoSj+SSV/pgxL/usAf4DUH06aIViPR0AAAAASUVORK5CYII=",
            symbolRotate: 0,
            symbolSize: [15, 14],
            symbolPosition: "end",
            symbolOffset: [8, 0],
            itemStyle: {
              color: "#1280eb",
              shadowColor: "#1280eb",
              shadowBlur: 10
            },
            tooltip: {
              show: false
            }
          }
        );
        // });
      });
      //渐变色操作
      let colorList = []; //存储渐变完成后的颜色
      this.colors.colors.forEach(item => {
        colorList.push(
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: item.color1 },
            { offset: 1, color: item.color2 }
          ])
        );
      });

      const option = {
        // 颜色
        color: colorList, //存储颜色
        //图表选择栏
        legend: {
          top: "5%",
          left: this.obj.legendDate,
          orient: "horizontal", //图例方向【horizontal/vertical】
          itemHeight: 12, //修改icon图形大小
          itemWidth: 12, //修改icon图形大小
          selectedMode: false, //不允许点击图例
          itemGap: 30,
          textStyle: {
            fontSize: 14,
            color: "#fff"
          },
          data: this.obj.legend,
          tooltip: {
            show: false
          }
        },
        //图标离容器的距离
        grid: {
          left: "5%",
          right: "3%",
          bottom: "10%",
          top: "20%",
          //是否包含坐标轴
          containLabel: true
        },
        //x坐标轴
        xAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.3"
              }
            },
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "#476579c1",
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              color: "#fff",
              fontSize: 14
            }
          }
        ],
        //y坐标轴
        yAxis: [
          {
            type: "category",
            name: "",
            data: this.obj.ydata,
            splitLine: {
              // show: false
            },
            inverse: true,
            axisTick: {
              show: false
            },
            axisLine: {
              // show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "#476579c1",
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 14
              }
            }
          }
        ],
        // 数据展示区域
        series: this.serData
      };
      // console.log(option);
      this.myChart1.setOption(option);
    },
    // 数组求和
    sum(arr) {
      return eval(arr.join("+"));
    }
  }
};
</script>

<style lang="less" scoped>
.index {
  width: 467px;
  height: 300px;
  // background-color: #13447900;
}
</style>