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 = nullsidebarContainer &&sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);},sidebarResizeHandler(e) {if (e.propertyName === "width") {this._thisForChart.chart.resize();}},// window 的尺寸发生变化的时候 会执行图表的resizeaddEventListenerToWindowResize(_this) {this._thisForWindow = _this;window.addEventListener("resize", this.windowResizeHandler);},removeEventListenerToWindowResize(_this) {this. _thisForWindow = nullwindow.removeEventListener("resize", this.windowResizeHandler);},windowResizeHandler(e) {this._thisForWindow.chart.resize();},},
}
</script><style lang="scss" scoped>.chart_container {width: 20%; height: 400px}
</style>