關於在小程序項目中使用圖表插件AntV（即F2）

　　前言：最近嘛從開發H5和各種圖表系統被拉到來開發小程序，拿到的一個項目里面就涉及幾個圖表，用canvas是能實現效果，但是周期長而且還不一定好看穩定。所以嘛就上網找了相關資料。發現有Echarts為小程序專門改寫的一套，但是類型不是很全，就轉到了AntV這里來，阿里寫的F2內容也挺全的。所以就采用了。在這里貼鏈接感謝這位碼友的分享給我的靈感先 https://www.jianshu.com/p/6b9fe45f799f 。然后直接上代碼（代碼是經過項目需求更改的，僅做參考）如果找不到可以直接用下面我這個：https://github.com/FreeGrowth/f2-canvas

（/* 截圖小程序為本人開發。轉載請帶上本文URL地址和出處，尊重勞動成果，謝謝 */）

需要做小程序版的K線圖含成交量的移步這個鏈接：https://www.cnblogs.com/xiaozhu007/p/12505433.html

1.如何引入F2在小程序中

先下載上面的GitHub地址中的代碼壓縮包，然后把里面的f2-canvas整個文件夾放到你的項目當中，路徑要記得。如圖

2. 在你所要用到的頁面中import進去，引入的地方分別是json和js文件（當然也可以在app.js和app.json中引入）切記，兩個都要引入哦

js引入：import F2 from '../../common/f2-canvas/lib/f2'; （路徑按照你自己放的路徑去改）

json引入如下： 

{
  "usingComponents": {
    "ff-canvas": "../../common/f2-canvas/f2-canvas" // 這里是路徑
  }
}

　　

3. 一切就緒后開始擼圖表啦，wxml要先寫好對應的容器寬高，一定要給寬高

<view class="pie-view">
       <ff-canvas id="pieSelect" canvas-id="pieSelect" opts="{{ optspie }}"> </ff-canvas>
</view>

　　這里的id可以隨便給，但canvas-id最好按照F2的指定圖表id來，具體可以看F2的demo。 opts綁定的是對應的數據變量名

css如下：（不給它寬高會報錯的～）

#pieSelect {
  width: 600rpx;
  height: 500rpx;
}

 

4.這里是js代碼區域（僅展示項目中所需要用到的功能代碼，更多的功能可以參考AntV和F2的API） 這里要寫在onLoad是因為要在頁面進來時候就開始數據圖表渲染，所以只能作為借鑒哦～

Page({

 

　　data: {

　　　　optspie: {}, // 資金占比餅狀圖

　　},

  onLoad(options) {
    const that = this // 綁定好this指向

    // 資金占比模塊-資金占比餅狀圖
    let pie = null // 先聲明一個變量用以后面做F2的new
    function pieChart(canvas, width, height) { // F2實現回調的方法，方法名用來最后賦值綁定
    //這里是為讓請求接口返回數據能直接賦值給到圖表數據渲染，所以用的ES6寫法
      new Promise(function(resolve,reject){ wx.request({ url: '這里是請求的接口，記得寫上自己的～', data: { code }, header: { 'content-type': 'application/json' }, // 請求成功后執行 success: function (res) { const dataNum = res.data.response.day_fund_info if (dataNum.length === 0 || !dataNum) { console.log('餅狀圖沒有數據') that.setData({ pieDataShow: true }) } else { // 這里是將返回的字符數據轉換為數字以方便圖表 const large_deal_amount = Number(dataNum.large_deal_amount) const mid_deal_amount = Number(dataNum.mid_deal_amount) const small_deal_amount = Number(dataNum.small_deal_amount) if (large_deal_amount === 0 && mid_deal_amount === 0 && small_deal_amount === 0) { console.log('餅狀圖數據都是0') that.setData({ pieDataShow: true }) return } // 賦值對應值給到餅圖（也可以把percent給改成純數字這樣你就能在自己的項目上看到效果了） let pieData = [ { name: '主力', percent: large_deal_amount,}, { name: '跟風', percent: mid_deal_amount,}, { name: '散戶', percent: small_deal_amount,} ] resolve(pieData) // 將數據返回給到new上進行then索取  } } }) }).then((data) => { const total = data[0].percent + data[1].percent + data[2].percent // 計算總數 let brunt = data[0].percent / total * 100 // 計算主力占比 let Retail = data[1].percent / total * 100 // 計算跟風占比 let follow = data[2].percent / total * 100 // 計算散戶占比 // 餅圖的圖例配置 const map = { '主力': `${brunt.toFixed(2)}%`, '跟風': `${Retail.toFixed(2)}%`, '散戶': `${follow.toFixed(2)}%` }; // 剛剛聲明的變量就是用在這里，new到F2的指定 pie = new F2.Chart({ el: canvas, width, height }); pie.source(data); // data就是傳入的數據。給到F2 // 圖例位置  pie.legend({ position: 'right', // 放在右邊展示 itemFormatter(val) { //配置圖例自定義展示內容 return val + ' ' + map[val]; }, nameStyle: { fontSize: '13', // 圖例文本大小 fill: '#ffffff' // 圖例文本顏色  }, marker: { symbol: 'circle', // marker 的形狀（圓點） radius: 4 // 半徑大小  } }); pie.tooltip(false); // 是否顯示工具箱 pie.coord('polar', { // 匹配餅狀圖的元素圓度等 transposed: true, radius: 0.85, innerRadius: 0.618 }); pie.axis(false); // 關閉XY軸等線條  pie.interval() .position('a*percent') // a為默認，percent即數據中的percent數值 .color('name', ['#FF4381', '#F2B356', '#F25E54']) // 餅圖對應顏色 .adjust('stack') .style({ lineWidth: 1, stroke: '#fff', lineJoin: 'round', lineCap: 'round' }); pie.interaction('pie-select', { cancelable: true, // 允許取消選中 animate: { // 選中動畫效果 duration: 300, easing: 'backOut' } }); pie.render(); // 執行  }) return pie; //最后返回給到pie  } 　　}

})

 

5.以上js和wxml完成后，還有一個重要步驟，在需要的地方或者要顯示的時候賦值給到一開始opts綁定的變量中

    this.setData({
      optspie: {
        onInit: pieChart //這里就是在js中用到的方法名
      }
    })

 

6.最后實現效果如圖：

 

最后：當然不止這一個環形餅圖，還有其他的柱狀圖折線圖等。都是一樣的邏輯，改不同的id和render前不同Geometry對象即可，附帶官方API：https://www.yuque.com/antv/f2/api-geometry

（最后再貼幾張圖）（/* 轉載請帶上本文URL地址和出處，尊重勞動成果，謝謝 */）