F2的微信小程序使用

1. F2簡介及語法參照網(wǎng)址

   https://www.yuque.com/antv/f2/miniprogram

2. F2的微信小程序圖表示例參照

   https://github.com/antvis/wx-f2

3. @antv/f2-canvas 模塊為 F2 的微信小程序圖表自定義組件，依賴于 @antv/wx-f2(F2
   對于微信小程序進行的適配)，請直接使用 @antv/f2-canvas。

   https://github.com/antvis/f2-canvas

原文鏈接（和原文相比有完善的地方）

F2的微信小程序使用詳解

此教程適用于初步了解微信小程序基礎框架的用戶

1. 創(chuàng)建標準小程序
2. 在項目根目錄下，初始化創(chuàng)建package.json文件

npm init    /*此處如果直接使用官方npm install 可能會出現(xiàn)沒有node_modules錯誤*/

3. 安裝npm install --production

npm install --production    /*建議使用--production選項，可以減少安裝一些業(yè)務無關的 npm 包，從而減少整個小程序包的大小*/

4. 安裝微信小程序 F2 圖表組件

npm i @antv/f2-canvas

5. 安裝好依賴包之后，運行**

點擊開發(fā)者工具頂部詳情，勾選 使用npm模塊，再點擊菜單欄中工具下的構建npm即可運行

6. 開始繪制柱狀圖

xx.json 配置文件，引入 f2-canvas 組件，由于微信小程序組件名不允許包含數(shù)字，所以這里將其命名為 ff-canvas。
// index.json
{
  "usingComponents": {
    "ff-canvas": "@antv/f2-canvas"
  }
}




xx.wxml 視圖，使用 ff-canvas 組件，
其中 opts 是一個我們在 xx.js 中定義的對象，必設屬性，
它使得圖表能夠在頁面加載后被初始化并設置，詳見 xx.js 中的使用
<!--index.wxml-->
<view class="container">
  <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>



xx.wxss 定義 ff-canvas 組件寬、高度
#column-dom{
  height: 100%;
  width: 100%
}


x.js 邏輯處理，這里還需要引入 F2 用于繪制圖表，結(jié)構如下，注意路徑正確。
// index.js
import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已經(jīng)將 F2 傳入，如果需要引入，注意需要安裝 @antv/wx-f2 依賴

let chart = null;

function initChart(canvas, width, height, F2) { // 使用 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 },
  ];
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.source(data, {
    sales: {
      tickCount: 5
    }
  });
  chart.tooltip({
    showItemMarker: false,
    onShow(ev) {
      const { items } = ev;
      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = '￥ ' + items[0].value;
    }
  });
  chart.interval().position('year*sales');
  chart.render();
  return chart;
}

Page({
  data: {
    opts: {
     >: initChart
    }
  },

  onReady() {
  }
});

7. Q1：如果報如下圖錯誤，檢查是否有在 .wxss 文件中為 ff-canvas 組件定義 width 和 height 樣式屬性，如沒有，加上即可，如此代碼所示：

/**app.wxss**/
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} //這里是之前作者沒有寫到的本人探坑有這個


//可以不再app.wxss里面加這個，加這個會造成被絕對定位了可以只在xxx.wxss里加一個
.container {
		width: 100%;
		height: 75upx;
}
//只加高和寬就可以了

x.js 邏輯處理，這里還需要引入 F2 用于繪制圖表，結(jié)構如下，注意路徑正確。
在官方給的api中有這個
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});
用的是這個window.devicePixelRatio會報錯的
chart = new F2.Chart({
    el: canvas,
    width,
    height
  });
  直接把官方實例上的那個改成這個就行了el就是initChart的第一個實參調(diào)用這個方法時已經(jīng)把window.devicePixelRatio封裝進initChart的實參里了



// index.js
import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已經(jīng)將 F2 傳入，如果需要引入，注意需要安裝 @antv/wx-f2 依賴

let chart = null;

function initChart(canvas, width, height, F2) { // 使用 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 },
  ];
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.source(data, {
    sales: {
      tickCount: 5
    }
  });
  chart.tooltip({
    showItemMarker: false,
    onShow(ev) {
      const { items } = ev;
      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = '￥ ' + items[0].value;
    }
  });
  chart.interval().position('year*sales');
  chart.render();
  return chart;
}

Page({
  data: {
    opts: {
     >: initChart
    }
  },

  onReady() {
  }
});