面积图x轴如何隔几个点显示刻度？-灵析社区
超好看鸭类似（[https://www.visactor.io/vchart/demo/area-chart/null-value-area](https://link.segmentfault.com/?enc=UklQf9kGMfEDT8MRIBdcVg%3D%3D.X1j3wz%2BLYrSSKdjyp97v6%2BtVgQItZ%2FhhxV15sGWA00PvjpUCuhXrbmL5J3xNpDMbODcXydlEK7je6aZEdEewGQ%3D%3D)）这样的面积图里面数据比较多，比如几百条。当某些轴上的标签内容过长时，很容易出现重叠或者视觉过于密集的情况，需要按一定的间隔去展示X轴上的刻度。  这类图表有配置使得坐标轴每隔几个点显示刻度，类似echarts的interval那种的么？
你可以的拿捏了解决方案 Solution
不同图表库的解决方案不一样，根据你给的demo，在VChart中只需要开启轴采样就可以避免坐标轴文字遮挡的问题。
* "sampling" 是否开启轴数据采样，默认开启。轴采样开启之后，会对轴数据进行采样显示，防止轴数据的重叠。
如果你还想自定义轴标签之间的间距，通过配置 "label.minGap" 可以控制轴标签之间的间距。
* 通过"minGap"可以自定义标签之间的最小间距（单位为像素）。仅当轴采样开始时生效（"sampling: true"）。 该配置会影响轴采样的结果。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/da669f92e505d6fc46acb351b713599e.png)
代码示例 Code Example
代码参考 Code Example
const spec = {
type: 'area',
data: {
values: [
{ month: '1980-05', vacancies: 36.7 },
{ month: '1980-08', vacancies: 37.5 },
{ month: '1980-11', vacancies: 38.7 },
{ month: '1981-02', vacancies: 37.4 },
{ month: '1981-05', vacancies: 44 },
{ month: '1981-08', vacancies: 44.5 },
{ month: '1981-11', vacancies: 41.7 },
{ month: '1982-02', vacancies: 37.3 },
{ month: '1982-05', vacancies: 30.3 },
{ month: '1982-08', vacancies: 26.8 },
{ month: '1982-11', vacancies: 30.3 },
{ month: '1983-02', vacancies: 29.7 },
{ month: '1983-05', vacancies: 32.4 },
{ month: '1983-08', vacancies: 33.6 },
{ month: '1983-11', vacancies: 36.3 },
{ month: '1984-02', vacancies: 44.6 },
{ month: '1984-05', vacancies: 40.3 },
{ month: '1984-08', vacancies: 48.5 },
{ month: '1984-11', vacancies: 49.8 },
{ month: '1985-02', vacancies: 60.4 },
{ month: '1985-05', vacancies: 68.6 },
{ month: '1985-08', vacancies: 67.2 },
{ month: '1985-11', vacancies: 66.2 },
{ month: '1986-02', vacancies: 64.8 },
{ month: '1986-05', vacancies: 66.1 },
{ month: '1986-08', vacancies: 61.1 },
{ month: '1986-11', vacancies: 66.3 },
{ month: '1987-02', vacancies: 69.5 },
{ month: '1987-05', vacancies: 66.9 },
{ month: '1987-08', vacancies: 70.1 },
{ month: '1987-11', vacancies: 66.9 },
{ month: '1988-02', vacancies: 70.2 },
{ month: '1988-05', vacancies: 74.4 },
{ month: '1988-08', vacancies: 80.8 },
{ month: '1988-11', vacancies: 85.1 },
{ month: '1989-02', vacancies: 84.7 },
{ month: '1989-05', vacancies: 93.7 },
{ month: '1989-08', vacancies: 76.6 },
{ month: '1989-11', vacancies: 79.2 },
{ month: '1990-02', vacancies: 71.9 },
{ month: '1990-05', vacancies: 64 },
{ month: '1990-08', vacancies: 56.7 },
{ month: '1990-11', vacancies: 41.6 },
{ month: '1991-02', vacancies: 33.8 },
{ month: '1991-05', vacancies: 31.6 },
{ month: '1991-08', vacancies: 29.8 },
{ month: '1991-11', vacancies: 30.9 },
{ month: '1992-02', vacancies: 33.3 },
{ month: '1992-05', vacancies: 31.9 },
{ month: '1992-08', vacancies: 33 },
{ month: '1992-11', vacancies: 36.9 },
{ month: '1993-02', vacancies: 37 },
{ month: '1993-05', vacancies: 42 },
{ month: '1993-08', vacancies: 46.2 },
{ month: '1993-11', vacancies: 48.5 },
{ month: '1994-02', vacancies: 57.6 },
{ month: '1994-05', vacancies: 69.5 },
{ month: '1994-08', vacancies: 82.2 },
{ month: '1994-11', vacancies: 85.6 },
{ month: '1995-02', vacancies: 72.7 },
{ month: '1995-05', vacancies: 77.3 },
{ month: '1995-08', vacancies: 74.6 },
{ month: '1995-11', vacancies: 72.5 },
{ month: '1996-02', vacancies: 81 },
{ month: '1996-05', vacancies: 76.7 },
{ month: '1996-08', vacancies: 77.5 },
{ month: '1996-11', vacancies: 82.5 },
{ month: '1997-02', vacancies: 81.3 },
{ month: '1997-05', vacancies: 82.8 },
{ month: '1997-08', vacancies: 84.9 },
{ month: '1997-11', vacancies: 90.4 },
{ month: '1998-02', vacancies: 98.3 },
{ month: '1998-05', vacancies: 104 },
{ month: '1998-08', vacancies: 89.8 },
{ month: '1998-11', vacancies: 102 },
{ month: '1999-02', vacancies: 87.2 },
{ month: '1999-05', vacancies: 100.2 },
{ month: '1999-08', vacancies: 106.9 },
{ month: '1999-11', vacancies: 109.6 },
{ month: '2000-02', vacancies: 118.1 },
{ month: '2000-05', vacancies: 115.9 },
{ month: '2000-08', vacancies: 114.4 },
{ month: '2000-11', vacancies: 114.8 },
{ month: '2001-02', vacancies: 99.7 },
{ month: '2001-05', vacancies: 94 },
{ month: '2001-08', vacancies: 90.2 },
{ month: '2001-11', vacancies: 88.5 },
{ month: '2002-02', vacancies: 90.5 },
{ month: '2002-05', vacancies: 96.2 },
{ month: '2002-08', vacancies: 103 },
{ month: '2002-11', vacancies: 97.6 },
{ month: '2003-02', vacancies: 109.7 },
{ month: '2003-05', vacancies: 104.6 },
{ month: '2003-08', vacancies: 104.1 },
{ month: '2003-11', vacancies: 107.5 },
{ month: '2004-02', vacancies: 103.8 },
{ month: '2004-05', vacancies: 127.1 },
{ month: '2004-08', vacancies: 124.6 },
{ month: '2004-11', vacancies: 139.2 },
{ month: '2005-02', vacancies: 146.2 },
{ month: '2005-05', vacancies: 140.9 },
{ month: '2005-08', vacancies: 139 },
{ month: '2005-11', vacancies: 134.1 },
{ month: '2006-02', vacancies: 144.3 },
{ month: '2006-05', vacancies: 154.1 },
{ month: '2006-08', vacancies: 154.9 },
{ month: '2006-11', vacancies: 162.1 },
{ month: '2007-02', vacancies: 160.8 },
{ month: '2007-05', vacancies: 168.6 },
{ month: '2007-08', vacancies: 173.3 },
{ month: '2007-11', vacancies: 183.3 },
{ month: '2008-02', vacancies: 178.2 },
{ month: '2008-05', vacancies: 184.5 },
{ month: '2008-08', vacancies: null },
{ month: '2008-11', vacancies: null },
{ month: '2009-02', vacancies: null },
{ month: '2009-05', vacancies: null },
{ month: '2009-08', vacancies: null },
{ month: '2009-11', vacancies: 148.9 },
{ month: '2010-02', vacancies: 168.4 },
{ month: '2010-05', vacancies: 170.3 },
{ month: '2010-08', vacancies: 178.6 },
{ month: '2010-11', vacancies: 191.1 },
{ month: '2011-02', vacancies: 189.4 },
{ month: '2011-05', vacancies: 187.3 },
{ month: '2011-08', vacancies: 183.4 },
{ month: '2011-11', vacancies: 179.3 },
{ month: '2012-02', vacancies: 181.8 },
{ month: '2012-05', vacancies: 178.1 },
{ month: '2012-08', vacancies: 175.3 },
{ month: '2012-11', vacancies: 164.8 },
{ month: '2013-02', vacancies: 149.8 },
{ month: '2013-05', vacancies: 143.5 },
{ month: '2013-08', vacancies: 140.6 },
{ month: '2013-11', vacancies: 138.9 },
{ month: '2014-02', vacancies: 143.2 },
{ month: '2014-05', vacancies: 147.4 },
{ month: '2014-08', vacancies: 146.6 },
{ month: '2014-11', vacancies: 149.7 },
{ month: '2015-02', vacancies: 151.9 },
{ month: '2015-05', vacancies: 157.7 },
{ month: '2015-08', vacancies: 161.7 },
{ month: '2015-11', vacancies: 167.4 },
{ month: '2016-02', vacancies: 172.2 },
{ month: '2016-05', vacancies: 171.1 },
{ month: '2016-08', vacancies: 177.5 },
{ month: '2016-11', vacancies: 182.3 },
{ month: '2017-02', vacancies: 185 },
{ month: '2017-05', vacancies: 185.6 },
{ month: '2017-08', vacancies: 200.9 },
{ month: '2017-11', vacancies: 204.4 },
{ month: '2018-02', vacancies: 212.8 },
{ month: '2018-05', vacancies: 223.8 },
{ month: '2018-08', vacancies: 228.7 },
{ month: '2018-11', vacancies: 230.2 },
{ month: '2019-02', vacancies: 232.4 },
{ month: '2019-05', vacancies: 228.1 },
{ month: '2019-08', vacancies: 224.3 },
{ month: '2019-11', vacancies: 226.7 },
{ month: '2020-02', vacancies: 227.4 },
{ month: '2020-05', vacancies: 129.2 },
{ month: '2020-08', vacancies: 206.3 },
{ month: '2020-11', vacancies: 254.1 },
{ month: '2021-02', vacancies: 288 },
{ month: '2021-05', vacancies: 370.2 },
{ month: '2021-08', vacancies: 333.9 },
{ month: '2021-11', vacancies: 397.2 },
{ month: '2022-02', vacancies: 421.9 },
{ month: '2022-05', vacancies: 480.1 }
]
},
xField: 'month',
yField: 'vacancies',
invalidType: 'break',
point: {
visible: false
},
title: {
text: 'Job vacancies, seasonally adjusted',
subtext: 'Source: Australian Bureau of Statistics, 30 June 2022'
},
axes: [
{
orient: 'left',
title: {
visible: true,
text: 'thousands'
}
},
{
orient: 'bottom',
sampling: true,
label:{
minGap: 100
}
}
]
};
结果展示 Results
在线效果参考："https://codesandbox.io/s/scales-at-several-points-on-the-x-ax..." (https://link.segmentfault.com/?enc=5fMyZkCagjObv%2B%2FAXhaNqw%3D%3D.4E6Nb0ZS8US48AnHKLu0kHaD9ghTWY8uiwdStFP4bCKeScSDa3VlsPD4KpbmalkCE9UZNWezHxV5QMl3ZSnBVRdyVYn3Vuf3wGv%2FmhGSwko%3D)
Online demo："https://codesandbox.io/s/scales-at-several-points-on-the-x-ax..." (https://link.segmentfault.com/?enc=Pjf7qdtk6vsfjDI%2BuTw44g%3D%3D.14Lxjzbwv849SmZsOG9XPWNTRqTJnQhL423HfjcGyaHDdcWqaTGi2kA73xkrgWs6kswFmzvmwMKeXr3ukBVl9Vr9mrcSyJNtBFgIQ6gigpw%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/ca4bc583c2d994141da2ffee402c019a.png)
相关文档 Related Documentation
存在空值的面积图demo："https://www.visactor.io/vchart/demo/area-chart/null-value-area" (https://link.segmentfault.com/?enc=o9xfKal6eWDCT9%2FQll2GIg%3D%3D.Z5CmmE70Oqe31E5JYi3P0Erhm8NZREdOC0Q5%2FlO4aFXeK%2BHyGqyysreEumkrulsHrTUtyeNlPrAXhJvkxHBlyA%3D%3D)
面积图教程："https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Type..." (https://link.segmentfault.com/?enc=KiVA%2B2LVDkcR0RkMGpt4Ww%3D%3D.dchj%2BFT3ip4TCBPKSQ7MEuQg4uD7SZSmKMOAaKH6fsgzOowiyxnn4%2FFL6IO5N0AhNbJt3JEDVKKRuTdxJMd%2FDmWwliYLXTTtCyRqg9sz8aY%3D)
相关api："https://www.visactor.io/vchart/option/areaChart#axes-band.sam..." (https://link.segmentfault.com/?enc=0mukMx1GiYxzC%2BemFhq8Gw%3D%3D.vfMke5RyvZRaheOCXUAJVsfzVO6zIIQRypzQi4ckXs7jFsC3l33T75L%2Bb7ApumZyQuvD1XRidBPvFCKY7J1d0M6TbvPDrrU0jphes%2Fm8bQ4%3D)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=3HHDdgUTVPaOFveP7qul5g%3D%3D.sG3Xr7BvvEzVj3DQ%2BKMN7jXP9GAQeLiRZQw8yc4%2BBfWewFkN%2FN1niBvjUTmMR33%2B)