摘要

双轴图表中，柱状图无法立即显示，并且只有在调整页面大小（放大或缩小）后才开始显示

官方示例代码

在直接复制，替换为个人数据时，出现柱状图无法显示问题

const config = {
    data: [data, data],
    xField: 'time',
    yField: ['value', 'count'],
    geometryOptions: [
      {
        geometry: 'column',
      },
      {
        geometry: 'line',
        lineStyle: {
          lineWidth: 2,
        },
      },
    ],
  };

解决方法

仅需要将柱状图与折线图的配置信息位置互换即可

const dualAxesConfig = {
    data: [overviewData, overviewData],
    xField: 'typeName',
    yField: ['points', 'commitNum'],
    width: '100%',
    yAxis: {
      // 格式化左坐标轴
      points: {
        min: 0,
        label: {
          formatter: (val) => `${val}分`,
        },
      },
      // 隐藏右坐标轴
      commitNum: {
        min: 0,
      },
    },
    geometryOptions: [
      
      {
        geometry: 'line',
        smooth: true,
        color: '#5AD8A6',
        tooltip: {
          formatter: (a) => {
            return { name: '提交次数', value: a.commitNum }
          }
        },
      },
      {
        geometry: 'column',
        color: '#5B8FF9',
        columnWidthRatio: 0.3,
        label: {
          position: 'middle',
        },
        tooltip: {
          formatter: (a) => {
            return { name: '积分', value: a.points }
          }
        },

      },
    ],
    // 更改柱线交互，默认为 [{type: 'active-region'}]
    legend: {
      itemName: {
        formatter: (text) => {
          return text === 'points' ? '积分' : "次数"
        }
      },
    },
    interactions: [
      {
        type: 'element-highlight',
      },
      {
        type: 'active-region',
      },
    ],
    onReady: (plot) => {
      plot.on('element:click', (evt) => {
        setPerformanceVisable(true);
        setSelectedType(evt.data.data.typeName);
      });
    }
  };