vue echarts 横向柱状图，交错正负轴标签

横向柱状图：

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

代码如下：

<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> 

展示效果图如下：