Vue使用Antv F2

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();
    },

效果如圖