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

@秋野

已于 2024-03-11 20:59:46 修改

阅读量1.3k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： echarts anti-design-vue 前端

于 2024-03-07 20:00:00 首次发布

本文链接：https://blog.csdn.net/BGMcat/article/details/136544244

摘要

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

官方示例代码

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

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,
      },
    },
    geometr