大家好，这次使用的是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();
