AntV F2是螞蟻金服旗下的一個專注於移動，開箱即用的視覺化解決方案，完美支援 H5 環境同時相容多種環境（Node, 小程式，Weex），完備的圖形語法理論，滿足你的各種視覺化需求，專業的移動設計指引為你帶來最佳的移動端圖表體驗。

　　AntV F2官方文件地址：https://antv.alipay.com/zh-cn/f2/3.x/

　　話不多說，直接進入正題：

　　Antv F2官方比較友好，給我們提供了兩種方式方便我們使用，分別是CDN方式（引入線上資源 <script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>）和npm安裝方式，因為專案是vue-cli搭建的，同時CDN方式引入比較簡單，引入檔案即可使用，所以在專案中使用的是npm安裝；

　　安裝命令（必須在專案對應的資料夾路徑下執行）：

　　npm install @antv/f2 --save

　　安裝完依賴之後接著就是需要引用到專案中，這裡有個坑，官方提供的引用方式在vue裡面是會報錯的，官方提供的方式是下圖

　　 如果在專案中是 import F2 from "@antv/f2" 這樣引用是會報語法錯誤的，報錯資訊為：“chart.pieLabel is not a function”，所以安裝方式建議修改為    

　　import F2 from "@antv/f2/lib/index-all"，這樣引用是可以正常使用不報錯的，親測可用；

　　安裝完依賴和引用檔案資源之後，就可以直接進行圖表配置和開發了；我在專案中用到了環形圖，直接進入環形圖Demo案例介面看看Demo，

　　https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html#_%E9%A5%BC%E5%9B%BE，

　　首先使用的時候檢視層很簡單，一個大div包住canvas標籤即可

  <div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>

　　接著就是資料邏輯層根據文件介紹：

　//模擬資料，也可以根據ajax進行請求後臺資料  
var data = [{
    const: 'const',
    type: '交通出行',
    money: 51.39
  }, {
    const: 'const',
    type: '飲食',
    money: 356.68
  }, {
    const: 'const',
    type: '生活日用',
    money: 20.00
  }, {
    const: 'const',
    type: '住房繳費',
    money: 116.53
  }];
　　//配置檢視id與上面html對應
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });
　　//定義渲染資料來源
  chart.source(data);
　　//定義圖表型別樣式，其中radius和innerRadius可以更改環形的大小
  chart.coord('polar', {
    transposed: true,
    radius: 0.9,
    innerRadius: 0.5
  });
  chart.axis(false);
　//圖表圖例
  chart.legend(false);
　// 圖表提示資訊
  chart.tooltip(false);
　//這裡可以配置更改環形中心文字
  chart.guide().html({
    position: ['50%', '50%'],
    html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
  });
　// 配置圖表顏色樣式和定位
  chart.interval().position('const*money').adjust('stack').color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14']);
　　//配置一些基本的文字資訊及樣式
  chart.pieLabel({
    sidePadding: 30,
    activeShape: true,
    label1: function label1(data) {
      return {
        text: '￥' + data.money,
        fill: '#343434',
        fontWeight: 'bold'
      };
    },
    label2: function label2(data) {
      return {
        text: data.type,
        fill: '#999'
      };
    },
　　//點選事件
    onClick: function onClick(ev) {
      var data = ev.data;
      if (data) {
        $('#title').text(data.type);
        $('#money').text(data.money);
      }
    }
  });
　// 最後渲染即可
  chart.render();

　　就這樣配置，就可以了，但是有個問題我們在vue中是不能直接這麼寫的，所以我們需要把這些程式碼定義在一個方法裡放在methods物件裡面，然後掛載時執行即可，效果圖如下：

　　這裡有個坑，就是我們用AntV F2的時候不能跟之前的習慣一樣直接放在mounted函式中執行，不然會造成圖表處空白，重新整理一下才能好這種bug，出現這個問題的原因昨天下午想了很久沒想通沒有得到解決，早上來公司的時候突然恍然大悟：造成這種bug的原因其實很簡單，就是因為Ant F2是jquery方式寫的，並且還有操作DOM，我們直接在mounted上直接執行方法就會帶來一個問題就是js已經執行了，但是DOM元素還沒渲染完成，圖表沒有資料，所以才會空白，並且mounted方法是載入完成再次進入會存入快取的，所以才會重新整理一下才能好；我這裡的解決方案是直接設定個定時器setTimeout，直接延遲1秒左右執行方式就可以解決；

　　再簡單介紹一個折線圖的使用方法：

　　HTML檢視層程式碼：

  <div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>

　　js資料邏輯層程式碼：

  //模擬資料
var data = [{
    day: '週一',
    value: 300
  }, {
    day: '週二',
    value: 400
  }, {
    day: '週三',
    value: 350
  }, {
    day: '週四',
    value: 500
  }, {
    day: '週五',
    value: 490
  }, {
    day: '週六',
    value: 600
  }, {
    day: '週日',
    value: 900
  }];
　　// 與上面的檢視層對應
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });
　　//配置資料來源
  chart.source(data, {、
　　//value和day都是根據模擬資料的屬性來配置的，所以這裡的value和day是可以更改的，具體根據後臺資料屬性來
    value: {
      tickCount: 5,
      min: 0
    },
    day: {
      range: [0, 1]
    }
  });
　　// 配置文字提示資訊以及觸發的方法
  chart.tooltip({
    showCrosshairs: true,
    showItemMarker: false,
    onShow: function onShow(ev) {
      var items = ev.items;
      items[0].name = null;
      items[0].value = '$ ' + items[0].value;
    }
  });
　　//配置對應方式
  chart.axis('day', {
    label: function label(text, index, total) {
      var textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      } else if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  });
　　// 配置定位
  chart.line().position('day*value');
　　//配置圖表樣式
  chart.point().position('day*value').style({
    stroke: '#fff',
    lineWidth: 1
  });
　　//渲染
  chart.render();

　　配置完之後我們就可以看到效果了，效果圖如下：

 　　最後我們來總結一下：

　　　　　　（1） 首先我們在工作中肯定會碰到各種各樣的問題或者說bug，一定要理性的分析和解決，不能鑽進誤區不出來，如果多次嘗試還是沒辦法解決，那很大的概率就是你自己進入了誤區，這個時候就需要冷靜下來分析和思考，我遇到的就是典型的案例；

　　　　　　（2）在使用這種視覺化圖表的時候有些部分功能是不可使用的，比如環形圖的點選展示圖例，這是因為AntV F2是用jquey實現的，你的專案中沒有引入的話是會報錯（“$ is not defined”），如果確實需要使用引入jquery即可

　　　　　　（3）正是因為AntV F2是jquery開發的，需要操作DOM樹，所以有的時候會造成js已經執行了但是DOM元素還沒有渲染完成的情況，這個時候我們要想到換種思路比如setTimeout即可解決，考慮問題要多元化和全面，辦法總比困難多

 　　　　好了，本篇關於AntV F2移動端視覺化圖表庫的介紹和應用就到這裡了，如有疑問歡迎私信溝通交流或在評論區留言一起討論解決！&n