前端 - 在小程序中，柱图数据过多时，如何配置横向滚动条？

Question

在飞书小程序中使用VChart时，柱图数据过多时，如何配置横向滚动条？

Answer 1

解决方案 Solution

同PC端，配置scrollBar即可，通常而言，你还需要配置表示scrollBar位置的属性scrollBar.orient以及表示当前视窗范围的属性scrollBar.start和scrollBar.end。

代码示例 Code Example

代码参考 Code Example

const spec = {  type: 'bar',  data: [    {      id: 'barData',      values: [        { year: '2000', sales: 22 },        { year: '2001', sales: 13 },        { year: '2002', sales: 25 },        { year: '2003', sales: 29 },        { year: '2004', sales: 38 },        { year: '2005', sales: 49 },        { year: '2006', sales: 58 },        { year: '2007', sales: 29 },        { year: '2008', sales: 78 },        { year: '2009', sales: 19 },        { year: '2010', sales: 23 },        { year: '2011', sales: 20 },        { year: '2012', sales: 98 },        { year: '2013', sales: 49 },        { year: '2014', sales: 28 }      ]    }  ],  xField: 'year',  yField: 'sales',  scrollBar: [    {      orient: 'bottom',      start: 0,      end: 0.5,      roam: true    }  ]};

相关文档 Related Documentation

滚动条demo：https://www.visactor.io/vchart/demo/scrollbar/basic-scrollbar...

滚动条教程：https://www.visactor.io/vchart/guide/concepts/scrollbar

相关api：https://www.visactor.io/vchart/option/barChart#scrollbar

github：https://github.com/VisActor/VChart

Answer 2

https://www.visactor.io/vchart/demo/scrollbar/basic-scrollbar...

或者使用dataZoom

https://www.visactor.io/vchart/example