摘要
双轴图表中,柱状图无法立即显示,并且只有在调整页面大小(放大或缩小)后才开始显示
官方示例代码
在直接复制,替换为个人数据时,出现柱状图无法显示问题
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);});}};