当前位置：首页 > news >正文

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

news 2025/8/5 5:45:38

摘要

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

官方示例代码

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

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);});}};

在这里插入图片描述