Vue使用Antv F2

最新推荐文章于 2025-06-23 09:56:04 发布

原创最新推荐文章于 2025-06-23 09:56:04 发布 · 5.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #F2 #柱状图

前端同时被 2 个专栏收录

42 篇文章

订阅专栏

vue.js

17 篇文章

订阅专栏

F2是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex）。

在Vue中使用F2移动端图表，详细步骤如下：

npm安装

npm install @antv/f2 --save

在main.js中引用

impor F2 from '@antv/f2';

Vue.prototype.F2 = F2;

在页面中使用，首先创建一个容器，给定宽高，然后在js中渲染数据

 <canvas id="boxCanvas" style="width: 100%;height: 300px;"></canvas>

   boxCanvas(){
      var data = [{
        year: '2015 年',
        sales: 145
      }, {
        year: '2016 年',
        sales: 121
      }, {
        year: '2017 年',
        sales: 100
      }, {
        year: '2018 年',
        sales: 97
      }, {
        year: '2019 年',
        sales: 85
      }];
      var chart = new this.F2.Chart({
        id: 'boxCanvas',
        pixelRatio: window.devicePixelRatio
      });
      chart.source(data, {
        sales: {
          tickCount: 5
        }
      });
      chart.tooltip({
        showItemMarker: false,
        onShow: function onShow(ev) {
          var items = ev.items;
          items[0].name = null;
          items[0].name = items[0].title;
          items[0].value = '¥ ' + items[0].value;
        }
      });
      // 让柱状图的宽度适配不同的屏幕尺寸
      var barWidth = 36 * (window.innerWidth / 375);
      chart.interval().position('year*sales').color('l(90) 0:#1890ff 1:#70cdd0').size(barWidth); // 定义柱状图渐变色
      chart.render();
    },

效果如图