Echarts绘制双x轴柱状图

createdEcharts1() {
      const labelData = this.appInfoCounts.appCounts.map(item => { return item.name });
      const appCountsList1 = this.appInfoCounts.appCounts.map(item => { return (item.value1) });
      const appCountsList2 = this.appInfoCounts.appCounts.map(item => { return (item.value2) });
      const effectCountsList = this.appInfoCounts.effectCounts.map(item => { return (item.value) });
      console.log(labelData,appCountsList1,appCountsList2,effectCountsList);

      var dom = document.getElementById('container1');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var option;
      option = {
        legend: {
          data: ['对内','对外', '成果数量'],
          left: 'center',
          bottom: 15,
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 20,
          borderRadius: 4,
          textStyle: {
            color: '#262C41',
            fontSize: 14
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            var tooltip = params[0].name + '<br/>';
            params.forEach(function(item) {
              tooltip += item.marker + item.seriesName + '：' + Math.abs(item.value) + '<br/>';
            });
            return tooltip;
          }
        },

        xAxis: [{
          type: 'value',
          min: -1,
          max: 0,
          gridIndex: 0,
          // inverse: true, // 反向显示
          // interval:1,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: function(v) {
              return (v * -1)
            }
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E0E0E0',
              type: 'dashed'
            }
          }
        }, {
          type: 'value',
          gridIndex: 1,
          min: 0,
          interval:1,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E0E0E0',
              type: 'dashed'
            }
          }
        }],
        yAxis: [
          {
            type: 'category',
            gridIndex: 0,
            inverse: true,
            data: labelData,
            axisTick: { show: false },
            axisLabel: {
              show: false,
            },
            axisLine: { show: false },
          },
          {
            type: 'category',
            gridIndex: 1,
            inverse: true,
            offset:40,
            data: labelData, // 使用同一个 labelData
            axisTick: { show: false },
            axisLabel: {
              width: "20%", // 根据需要调整标签的宽度
              align:'center',
              verticalAlign:'middle',
            },
            axisLine: { show: false },
          },
        ],

        grid: [
          {
            top: 20,
            width: '34%', // 调整这里的宽度
            left: '5%',
            gridIndex: 0,
          },
          {
            top: 20,
            left: '60%', // 调整这里的 left
            right: '5%',
            gridIndex: 1,
          },
        ],
        color: ['#6295f9','#64ccf5', '#00c2b6'],
        series: [{
          name: '对内',
          type: 'bar',
          stack:'left',
          gridIndex: 0,
          itemStyle: {
            normal: {
              show: true,
              color: '#6295f9',
              // barBorderRadius: 50,
              borderWidth: 0,
              borderColor: '#333',
              label: {
                show: false,
                position: 'left',
                formatter: function(v) {
                  return (v.value * -1);
                }
              }
            }
          },
          data: appCountsList1
        },{
          name: '对外',
          type: 'bar',
          stack:'left',
          gridIndex: 0,
          itemStyle: {
            normal: {
              show: true,
              color: '#64ccf5',
              // barBorderRadius: 50,
              borderWidth: 0,
              borderColor: '#333',
              label: {
                show: false,
                position: 'left',
                formatter: function(v) {
                  return (v.value * -1);
                }
              }
            }
          },
          data: appCountsList2
        },
          {
            name: '成果数量',
            type: 'bar',

            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                show: true,
                color: '#00c2b6',
                // barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333',
                label: {
                  show: false,
                  position: 'right',
                  formatter: function(v) {
                    return v.value;
                  }
                }
              }
            },
            data: effectCountsList
          }

        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      window.addEventListener('resize', myChart.resize);
    },

因为刚开始左边的x轴呈负数显示-1--0，因为在代码中，我们使用了 min: 0 和 max: 1 来限制左边 x 轴的范围为 0 到 1，并且使用了 inverse: true 来反向显示刻度。同时，formatter 函数中使用了 -1 乘以刻度值来将刻度值转换为负数。

因此，无论你如何调整图表的其他部分，左边的 x 轴都将保持负数。如果你希望左边的 x 轴显示正数，你需要相应地调整代码。例如，将 min 设置为 -1，将 max 设置为 0，并删除 inverse: true。这样可以使左边的 x 轴从 -1 到 0，并且显示为正数，就完成！