横向柱状图：

同一个页面展示多个相同横向柱状图；

代码如下：

<template>
  <div style="display: flex;justify-content: space-around;">
    <div 
      v-for="(chart,index) in barChartList" 
      :key="index" 
      class="chart_container"
      :ref="'chart'+ index" 
      >
      <div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'brinsonIndustryAttributionAnalysis',
  props: {},
  data () {
    return {
      barChartList: [
        {
          title: '超额配置',
          xData: [11,-7,-22,8,-70,1,-30,2,-20,10],
          yData: ['电力设备','石油石化','交通运输','食品饮料','家用电器','基础化工','建筑装饰','通信','计算机','公用事业'],
        },
        {
          title: '超额收益',
          xData: [3.67,30,-10,8.9,9,6.44,4.7,-1.2,7.31,-8.32,44],
          yData: ['电力设备','石油石化','交通运输','食品饮料','家用电器','基础化工','建筑装饰','通信','计算机','公用事业'],
        },
        {
          title: '资产配置收益',
          xData: [5.3,6.5,-7.6,8.8,8.5,1.7,-4.3,2.3,-3.4,7.6],
          yData: [],
        },
        {
          title: '个股选择收益',
          xData: [4.3,7.8,-4.1,4.3,6.6,9.9,-2.1,3.8,-1.69,2.3],
          yData: [],
        },
        {
          title: '交互收益',
          xData: [7.7,5.4,-1.5,6.6,10.6,4,-3.3,1.32,-1.22,8.8],
          yData: [],
        },
      ],
      chartColors: ['#eb9912','#6181ff','#e2808c','#bf81ff','#a7d0ff']
    }
  },
  created () {},
  mounted() {
    this.$nextTick(() => {
      this.initBarChart()
      this.addEventListenerToSidebarContainer(this)
      this.addEventListenerToWindowResize(this)
    })
  },
  beforeDestroy () {
    this.removeEventListenerToSidebarContainer()
    this.removeEventListenerToWindowResize()
  },
  computed: {},
  watch: {},
  methods: {
    initBarChart () {
      this.barChartList.forEach((item,index) => {
        console.log(index,'index');
        var chartDom = this.$refs['chart' + index][0]
        this.chart = echarts.init(chartDom);
        let option = {
          title: {
            text: item.title,
            left:'center',
            top: '0%',
            textStyle:{
              fontSize:16,
              fontWeight:'700'
            }
          },
          color: this.chartColors[index],
          grid: {
            top: '12%',
            left: index === 0 ? '25%' : '20%',
            right: '20%',
            bottom: '5%',
          },
          xAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'solid'
              }
            },
            axisLabel: {
              show: true,
              color: '#000',
              fontSize: 9,
              formatter: (value) => {
                return `${value}%`
              }
            },
          },
          yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisTick: { show: false },
            data:item.yData,
            axisLabel: {
              show: index === 0 ? true : false,
              color: '#000',
            }
          },
          series: [
            {
              
              type: 'bar',
              label: {
                show: true,
                // formatter: function(params) {
                //   return params.value
                // },
              },
              data: item.xData.map((item) => {
                return {
                  value: item,
                  label: {
                    show: true,
                    position: item > 0 ? 'right' : 'left',
                    textStyle: {
                      color: '#000',
                      fontSize: 10,
                    }
                  }
                }
              })
            }
          ]
        }
        this.chart.setOption(option,true);
      })
    },


    // 监听侧边栏导航的宽度发生变化
    addEventListenerToSidebarContainer(_this) {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = _this;
      sidebarContainer &&
        sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
    },
    removeEventListenerToSidebarContainer() {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = null
      sidebarContainer &&
        sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
    },

    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this._thisForChart.chart.resize();
      }
    },

    // window 的尺寸发生变化的时候 会执行图表的resize
    addEventListenerToWindowResize(_this) {
      this._thisForWindow = _this;
      window.addEventListener("resize", this.windowResizeHandler);
    },
    removeEventListenerToWindowResize(_this) {
     this. _thisForWindow = null
      window.removeEventListener("resize", this.windowResizeHandler);
    },

    windowResizeHandler(e) {
      this._thisForWindow.chart.resize();
    },
  },
}
</script>

<style lang="scss" scoped>
  .chart_container {
    width: 20%; 
    height: 400px
  }
</style>

展示效果图如下：