这是改造后的效果:

具体代码：

init3() {
      var chartDom = document.getElementById("mountNode3");
      var myChart = echarts.init(chartDom);
      const myColor = ["#1089E9", "#1089E9", "#1089E9", "#1089E9", "#1089E9"];
      var option;
      option = {
        grid: {
          top: "30%",
          left: "22%",
          bottom: "10%",
        },
        xAxis: {
          // 不显示x轴相关信息
          show: false,
        },
        yAxis: [
          {
            type: "category",
            // y轴数据反转，与数组的顺序一致
            inverse: true,
            // 不显示y轴线和刻度
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            // 将刻度标签文字设置为白色
            axisLabel: {
              color: "#fff",
            },
            data: ["食堂", "科研楼", "教学楼", "宿舍楼", "专家楼"],
          },
          {
            // y轴数据反转，与数组的顺序一致
            inverse: true,
            show: true,
            // 不显示y轴线和刻度
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            // 将刻度标签文字设置为白色
            axisLabel: {
              // color: "#fff",
              show: false,
            },
            data: [500, 500, 500, 500, 500],
          },
        ],
        series: [
          {
            // 第一组柱子（条状）
            name: "条",
            type: "bar",
            // 柱子之间的距离
            barCategoryGap: 10,
            // 柱子的宽度
            barWidth: 10,
            // 层级 相当于z-index
            yAxisIndex: 0,
            // 柱子更改样式
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color可以修改柱子的颜色
              color: function (params) {
                // params 传进来的是柱子的对象
                // dataIndex 是当前柱子的索引号
                // console.log(params);
                return myColor[params.dataIndex];
              },
            },
            data: [300, 129, 120, 121, 100],
            // 显示柱子内的百分比文字
            // label: {
            //   show: true,
            //   position: "inside",
            //   // {c} 会自动解析为数据（data内的数据）
            //   formatter: "{c}人",
            // },
          },
          {
            // 第二组柱子（框状 border）
            name: "框",
            type: "bar",
            // 柱子之间的距离
            barCategoryGap: 10,
            // 柱子的宽度
            barWidth: 12,
            // 层级 相当于z-index
            yAxisIndex: 1,
            // 柱子修改样式
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 1,
              barBorderRadius: 15,
            },
            data: [500, 500, 500, 500, 500],
          },
        ],
      };
      option && myChart.setOption(option);
    },