echart写横向柱状图及颜色自定义

效果图

<div class="musicalInstrument">
    <div class="divHeader">{{ musicalInstrument.name }}</div>
    <div class="cutLine"></div>
    <div class="divComponent">
      <div class="instrument">
        <div id="myBarChart" :style="{ width: '100%', height: '100%' }"></div>
      </div>
    </div>
  </div>

export default {
  computed: {},
  watch: {},
  data() {
    return {
      musicalInstrument: {
        name: "乐器喜爱度排行",
        option: {
          title: {},
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: [],
          },
          grid: {
            left: "20%",
            top: "4%",
            width: "76%",
            height: "75%",
          },
          xAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "#7b7575",
                type: "dashed",
              },
            },
            axisLine: {
              lineStyle: {
                color: "black",
              },
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: {
            type: "category",
            data: ["吉他", "钢琴", "小提琴", "架子鼓", "钢琴", "唢呐"],
            axisLine: {
              lineStyle: {
                //设置y轴字体颜色
                color: "black",
              },
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              name: "",
              type: "bar",
              barWidth: "30%", //设置柱子宽度
              data: [10, 9, 12, 13, 13, 13],
              itemStyle: {
                normal: {
                  //设置柱状图颜色，注意：如果颜色太少的话，后面颜色不会自动循环
                  color: function (params) {
                    var colorList = [
                      "blue",
                      "blue",
                      "orange",
                      "orange",
                      "green",
                      "green",
                    ];
                    return colorList[params.dataIndex];
                  },
                },
              },
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.myBarChart = this.$echarts.init(document.getElementById("myBarChart"));
    this.myBarChart.setOption(this.musicalInstrument.option);
  },
};

* {
  margin: 0;
  padding: 0;
}

.musicalInstrument {
  border-radius: 16px;
  height: 32%;
  width: 100%;
  background: rgb(236, 235, 235);
}

.divHeader {
  font-size: 15px;
  padding: 10px 15px;
  font-weight: bold;
}

.cutLine {
  width: 100%;
  height: 5px;
  background-image: linear-gradient(to right, #0a3e55, #8f9192);
}

.divComponent {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 99%;
  height: calc(100% - 45px);
  padding: 10px 15px;
}
.instrument {
  width: 100%;
  height: 100%;
}

/*滚动条相关css设置*/
::-webkit-scrollbar {
  width: 0px; /*滚动条宽度*/
}