求教：apexcharts-card图例显示有问题

ynlb

使用apexcharts-card从燃气中读取信息后，图例显示有问题，不会显示在一行上，咋办？

HA显示代码如下:

type: custom:apexcharts-card
graph_span: 36mo
style:
  width: 100%
  padding: 0px !important
  margin: 0px !important
header:
  show: false
  title: 燃气用量历史统计
  show_states: false
all_series_config:
  stroke_width: 2
  show:
    in_header: false
    legend_value: false
series:
  - entity: sensor.ran_qi_zhang_dan_lie_biao
    type: column
    name: 2023年
    unit: m³
    color: "#4CAF50"
    data_generator: |
      const data = entity.attributes.enhanced_bill_list;
      if (!data) return [];
      try {
        const parsed = JSON.parse(data);
        return parsed
          .filter(item => item.billYear === 2023 && item.billYm && item.gasAmt)
          .map(item => {
            let dateStr = item.billYm;
            if (dateStr.includes('年')) {
              dateStr = dateStr.replace('年', '-').replace('月', '');
            }
            const date = new Date(dateStr + '-01');
            const time = date.getTime() || 0;
            const value = parseFloat(item.gasAmt) || 0;
            return [time, value];
          })
          .filter(item => item[0] !== 0)
          .sort((a, b) => a[0] - b[0]);
      } catch (e) {
        return [];
      }
  - entity: sensor.ran_qi_zhang_dan_lie_biao
    type: column
    name: 2024年
    unit: m³
    color: "#2196F3"
    data_generator: |
      const data = entity.attributes.enhanced_bill_list;
      if (!data) return [];
      try {
        const parsed = JSON.parse(data);
        return parsed
          .filter(item => item.billYear === 2024 && item.billYm && item.gasAmt)
          .map(item => {
            let dateStr = item.billYm;
            if (dateStr.includes('年')) {
              dateStr = dateStr.replace('年', '-').replace('月', '');
            }
            const date = new Date(dateStr + '-01');
            const time = date.getTime() || 0;
            const value = parseFloat(item.gasAmt) || 0;
            return [time, value];
          })
          .filter(item => item[0] !== 0)
          .sort((a, b) => a[0] - b[0]);
      } catch (e) {
        return [];
      }
  - entity: sensor.ran_qi_zhang_dan_lie_biao
    type: column
    name: 2025年
    unit: m³
    color: "#FF9800"
    data_generator: |
      const data = entity.attributes.enhanced_bill_list;
      if (!data) return [];
      try {
        const parsed = JSON.parse(data);
        return parsed
          .filter(item => item.billYear === 2025 && item.billYm && item.gasAmt)
          .map(item => {
            let dateStr = item.billYm;
            if (dateStr.includes('年')) {
              dateStr = dateStr.replace('年', '-').replace('月', '');
            }
            const date = new Date(dateStr + '-01');
            const time = date.getTime() || 0;
            const value = parseFloat(item.gasAmt) || 0;
            return [time, value];
          })
          .filter(item => item[0] !== 0)
          .sort((a, b) => a[0] - b[0]);
      } catch (e) {
        return [];
      }
  - entity: sensor.ran_qi_zhang_dan_lie_biao
    type: line
    name: 月账单
    unit: 元
    color: "#FF5722"
    stroke_width: 1
    yaxis_id: y2
    data_generator: |
      const data = entity.attributes.enhanced_bill_list;
      if (!data) return [];
      try {
        const parsed = JSON.parse(data);
        return parsed
          .filter(item => item.billYm && item.billAmt)
          .map(item => {
            let dateStr = item.billYm;
            if (dateStr.includes('年')) {
              dateStr = dateStr.replace('年', '-').replace('月', '');
            }
            const date = new Date(dateStr + '-01');
            const time = date.getTime() || 0;
            const value = parseFloat(item.billAmt) || 0;
            return [time, value];
          })
          .filter(item => item[0] !== 0)
          .sort((a, b) => a[0] - b[0]);
      } catch (e) {
        return [];
      }
apex_config:
  chart:
    height: 230
    margin:
      top: 40
      left: 10
      right: 10
      bottom: 10
    toolbar:
      show: true
      tools:
        download: true
        selection: true
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
  plotOptions:
    bar:
      columnWidth: 100%
      borderRadius: 4
  xaxis:
    type: datetime
    tickPlacement: between
    labels:
      datetimeFormatter:
        year: yyyy
        month: M
        day: d MMM
      rotate: -45
    axisTicks:
      show: true
    axisBorder:
      show: true
  yaxis:
    - id: y1
      title:
        text: 用气量 (m³)
      min: 0
    - id: y2
      opposite: true
      title:
        text: 费用 (元)
      min: 0
  tooltip:
    x:
      format: yyyy年M月
    "y":
      formatter: |
        function(value, { seriesIndex }) {
          return seriesIndex < 3 ? value + ' m³' : '¥' + value;
        }
  legend:
    show: true
    position: top
    horizontalAlign: center
    fontSize: 12px
    itemWidth: auto
    width: 100%
    height: auto
    wrap: false
    floating: true
    itemMargin:
      horizontal: 5
      vertical: 0
    offsetX: 50
    offsetY: 5
    onItemClick:
      toggleDataSeries: true
    onItemHover:
      highlightDataSeries: true
  noData:
    text: 暂无数据
    style:
      fontSize: 16px

复制代码