仿蚂蚁金服AntV框架蚂蚁数据可视化F2条形图、柱状图（注释详尽）

大家好，这次使用的是AntV的蚂蚁数据可视化F2框架，类似于蚂蚁基金的效果，代码如下：
F2框架参考网址：https://antv-f2.gitee.io/zh/examples/bar/basic#basic

<canvas id="barCanvas"></canvas>

效果图如下：

import F2 from '@antv/f2';

const data = [{
  year: '1951 年',
  sales: 38
}, {
  year: '1952 年',
  sales: 52
}, {
  year: '1956 年',
  sales: 61
}, {
  year: '1957 年',
  sales: 145
}, {
  year: '1958 年',
  sales: 48
}, {
  year: '1959 年',
  sales: 38
}, {
  year: '1960 年',
  sales: 38
}, {
  year: '1962 年',
  sales: 38
}];
const barChart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});

barChart.source(data, {
  sales: {
    tickCount: 5,
    show: true,
    max: 150,//建议手动设置目标的最大值，防止图表自动渲染时数字超出横轴的屏幕
  }
});

barChart.tooltip({
  showItemMarker: false,
  onShow: function onShow(ev) {
    const items = ev.items;
    items[0].name = null;
    items[0].name = items[0].title;
    items[0].value = '¥ ' + items[0].value;
  }
});

var xField="year"
var yField="sales"
var isTransposed=true//是否翻转，为true时XY轴坐标会翻转，为false时则XY轴正常
barChart.coord({
  transposed: isTransposed,
});
barChart.axis(yField, false)//可设置是否隐藏横轴坐标系及上面的值（此时原坐标轴已翻转了）
//为条形图添加标注
if(isTransposed){//判断是否翻转，两种的样式有所不同
  data.map(function (obj) {
    console.log(obj, "打印obj")
    barChart.guide().text({
      position: [obj[xField], obj[yField]],
      content: obj[yField],
      style: {
        textAlign: 'start',
        color: "#aaa"
      },
      offsetX: 10
    });
  });
}else{
  data.map(function (obj) {
    console.log(obj, "打印obj")
    barChart.guide().text({
      position: [obj[xField], obj[yField]],
      content: obj[yField],
      style: {
        textAlign: 'center',
        color: "#aaa"
      },
      offsetY: -10
    });
  });
}

barChart.interval().position(`${xField}*${yField}`).color("#f00")
barChart.render();