echarts--Y轴名称超宽换行显示行高问题处理

设置yAxis.axisLabel.overflow:break为超宽换行

            yAxis: [{
              type: 'category',
              inverse: true, //y轴坐标轴向下
              position: 'left', // 设置 y 轴的位置在左边
              offset: 65, // 设置 y 轴距离左边的偏移量
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                interval: '0', //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签。
                fontSize: 12,
                color: '#bbb',
                width: 130,
                overflow: 'break',//break 超宽换行 truncate 超宽显示...
         
              },
              data: yName,
            }],

配置rich解决行高问题

              axisLabel: {
                show: true,
                interval: '0', //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签。
                fontSize: 12,
                color: '#bbb',
                width: 130,
                overflow: 'break',//break 超宽换行 truncate 超宽显示...
                rich: {
                  line: {
                    lineHeight: 18
                  }
                },
                formatter: function (value) {
                  return `{line|${value}}`;
                }
              },

完整代码

		<view style="width: 100vw;" v-show="!showEmpty">
            <l-echart :key="chartKey" ref="chart"></l-echart>
            <view class="bottm-chart">我是有底线的</view>
          </view>

 async init(data, chartHeight) {
      this.$nextTick(() => {
        this.$refs.chart.init(echarts, chart => {
          let dataArr = [];
          let count = [];
          let yName = [];
          let showName = [];
          data.forEach((item, index) => {
            showName = item.entrustDealerName
              ? item.entrustDealerName + '(' + item.showName + ')'
              : item.showName
            yName.push(showName);
            count.push(item.orderWeight);
            dataArr.push(Math.round(parseFloat(item.orderMoney) / 10000 * 100) / 100);
          })
          const newArr = count.map(item => item * -1)
          let option = {
            backgroundColor: '#fff',
            title: {
              // text: '销售额与销售量对比图',
              left: 20,
              textStyle: {
                fontSize: 16,
                fontWeight: 500,
                color: '#414957'
              },
              top: 12
            },
            // tooltip: {
            //   trigger: 'axis',
            //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
            //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            //   },
            //   // triggerOn: 'mousemove',
            //   backgroundColor: 'rgba(50,50,50,0.7)',
            //   textStyle: {
            //     color: '#fff'
            //   },
            //   // extraCssText: 'width:100px;height:100px;',
            //   formatter: function (params) {
            //     var title = '';
            //     var str = '';
            //     for (var i of params) {
            //       title = i.name.replace(/\n/g, '') + '\n';
            //       if (i.data == 'null' || i.data == null) {
            //         str += i.seriesName + '：无数据' + '\n'
            //       } else {
            //         str += i.seriesName + '：' + Math.abs(i.data) + '\n'
            //       }
            //     }
            //     return title + str.slice(0, -1);
            //   },
            // },
            legend: {
              top: 20,
              right: 10,
              itemGap: 10,
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                color: '#bbb'
              },
              data: ['销售量(吨)', '销售额(万元)']
            },
            color: ['#7291fd', '#44d39b'],
            grid: this.grid,
            xAxis: {
              show: false,
            },
            yAxis: [{
              type: 'category',
              inverse: true, //y轴坐标轴向下
              position: 'left', // 设置 y 轴的位置在左边
              offset: 65, // 设置 y 轴距离左边的偏移量
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                interval: '0', //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签。
                fontSize: 12,
                color: '#bbb',
                width: 130,
                overflow: 'break',//break 超宽换行 truncate 超宽显示...
                rich: {
                  line: {
                    lineHeight: 18
                  }
                },
                formatter: function (value) {
                  return `{line|${value}}`;
                }
              },
              data: yName,
            }],
            series: [{
              name: '销售量(吨)',
              type: 'bar',
              // barMaxWidth: 12,
              barWidth: 12, // 条形的宽度
              barCategoryGap: '20%', // 同一类目下，同一系列的柱子间距
              stack: '总量',
              emphasis: {
                // focus: 'series'
              },
              label: {
                show: true,
                // position: 'inside',
                normal: {
                  show: true,
                  position: 'left',
                  color: '#687284',
                  fontSize: '10',
                  formatter: function (params) {
                    return (params.data * -1).toFixed(3);
                  }
                },
              },
              data: newArr,
            }, {
              name: '销售额(万元)',
              type: 'bar',
              // barMaxWidth: 12,
              barWidth: 12,
              barCategoryGap: '20%', // 同一类目下，同一系列的柱子间距
              stack: '总量',
              emphasis: {
                // focus: 'series'
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#687284',
                  fontSize: '10',
                },

              },
              data: dataArr
            }]
          }
          chart.resize();
          chart.setOption(option);
        });
        this.setChartHeight(chartHeight)
      })
    },
     async getSaleStatistic(callback) {
      let data = {}
      this.showEmpty = true
      this.loading = true;
      this.isloading = true;
      uni.showLoading({
        title: '加载中...',
      })
      try {
        let result = await getSaleStatistic(data);
        if (result.codeState == 0) {
          let data = {
            type: 'error',
            message: result.message,
            icon: '',
          }
          this.loading = false;
          this.isloading = false;
          uni.hideLoading()
          return this.showToast(data);
        }
        let chartHeight = 300;
        let baseGrid = { ...this.grid }
        if (result.data.length > 0) {
          this.showEmpty = false
          if (result.data.length <= 4) {
            chartHeight = 300;
            // baseGrid.top = '70%'
            const top = 100 - 10 * (result.data.length + 1)
            baseGrid.top = top + '%'
          } else {
            chartHeight = result.data.length * 60;
            delete baseGrid.top;
          }
          this.grid = baseGrid
          /*
         grid: {
        // top: '60',
        left: '20%',
        right: '15%',
        bottom: '3%',
        containLabel: true,
      }
          */
        } else {
          this.showEmpty = true
        }
        await this.init(result.data, chartHeight);
        this.show = false;
        this.loading = false;
        this.isloading = false;
        uni.hideLoading()
      } catch (e) {
        console.error('获取数据失败:', error)
        this.loading = false;
        this.isloading = false
        uni.hideLoading()
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
      }
      callback && callback()
    },
     async setChartHeight(chartHeight) {
      this.$refs.chart.resize({
        width: this.chartWidth,
        height: chartHeight,
      });
      this.$forceUpdate();
    },