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

最新推荐文章于 2024-08-23 11:53:33 发布

Zan^Z

最新推荐文章于 2024-08-23 11:53:33 发布

阅读量2.2k

点赞数 2

分类专栏：小程序 AntV F2

本文链接：https://blog.csdn.net/Zan_Z/article/details/108753332

版权

小程序同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

AntV F2

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用AntV F2库在小程序中创建三柱状图，并实现了横向滑动的功能。重点在于数据格式的正确设置，避免出现双引号导致的错误。

摘要由CSDN通过智能技术生成

效果如图：
在这里插入图片描述
注意：数据格式的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;
}