小程序使用AntV F2三柱状图，横向左右滑动

效果如图：

注意：数据格式的number不可有双引号。

const app = getApp()
let chart = null;
function initChart(canvas, width, height,) {
      // 使用 F2 绘制图表
  const data = [{
     index: 0, name: "客单价", lx: "迎风店", number: 34.64},
				{
     index: 0, name: "客流量", lx: "迎风店", number: 14},
				{
     index: 0, name: "销售金额", lx: "迎风店", number: 485.01},
				{
     index: 1, name: "客单价", lx: "东风店", number: 37.87},
				{
     index: 1, name: "客流量", lx: "东风店", number: 20},
				{
     index: 1, name: "销售金额", lx: "东风店", number: 757.5},
				{
     index: 2, name: "客单价", lx: "蓝腾店", number: 53.6},
				{
     index: 2, name: "客流量", lx: "蓝腾店", number: 45},
				{
     index: 2, name: "销售金额", lx: "蓝腾店", number: 2412.18},
				{
     index: 3, name: "客单价", lx: "房北店", number: 40.61},
				{
     index: 3, name: "客流量", lx: "房北店", number: 45},
				{
     index: 3, name: "销售金额", lx: "房北店", number: 1827.49},
				{
     index: 4, name: "客单价", lx: "奥莱店", number: 56.48},
				{
     index: 4, name: "客流量", lx: "奥莱店", number: 20},
				{
     index: 4, name: "销售金额", lx: "奥莱店", number: 1129.7},
				{
     index: 5, name: "客单价", lx: "北潞园店", number: 61.16},
				{
     index: 5, name: "客流量", lx: "北潞园店", number: 15},
				{
     index: 5, name: "销售金额", lx: "北潞园店", number: 917.39}];
  console.log(data);
  chart = new F2.Chart({
     
    el: canvas,
    width,
    height,
  });

  if(data.length>3){
     
    chart.source(data, {
     
      index: {
       // 这里横坐标使用 index，
        min:0, // 设置刚开始显示的区间 0-3
        max: 3
      },
    });
    chart.interval().position('index*number').color("name", ["#8e95fe", "#fcdb57", "#7eb6f7"]).shape('text').adjust({
     
      type: 'dodge',
      // 控制双柱图的间距
      marginRatio: 0.05
    });

    chart.axis("index", {
     
      label(text) {
          
        var result = (text.toString()).indexOf("."); //等于-1 不含小数点
        if(result==-1){
     
          return {
     
            fontSize: 12,
            text: data[text*3].lx  // 在这里将横坐标显示为属性为lx的内容
          };
        }
      }
    });  

    chart.interaction('pan');
    // 定义进度条
    chart.scrollBar({
     
      mode: "x",
      xStyle: {
     
        offsetY: -5
      }
    });
  }else{
     
    chart.source(data)
    chart.interval().position('lx*number').color("name", ["#8e95fe", "#fcdb57", "#7eb6f7"]).shape('text').adjust({
     
      type: 'dodge',
      // 控制柱图的间距
      marginRatio: 0.05
    });
  }

  chart.render();
  return chart;
}