寫在最前

    沒有接觸過 AntV 的諸位看客可通過這篇不成文的文章稍作了解。最近 病毒猖獗，遂抽空做了一個相關小 DEMO。資料視覺化方面的使用的是 AntV F2，前端框架使用 Vue 快速成型，使用與 Vue 配合較好的 Vant 最為UI框架以節約時間。此文以一個小小的示例（渲染能夠橫向滾動的圖表），來填滄海一粟之坑，也算是入門。因為部落格園常有神出沒，故作此引以節約貴神時間，大神請出門左轉。如有雅緻對鄙人指點一番亦感激不盡！

思路

通過 Interaction 實現平移，通過 ScrollBar 顯示滾動條。

1.Interaction

F2 提供一套互動機制，以達到通用互動行為的封裝和複用。基於此機制，我們提供了以下五種通用的互動行為：

• 餅圖選中
• 柱狀圖選中
• 圖表平移 pan
• 圖表縮放
• 圖表 swipe 快掃

2.ScrollBar

Scroll bar 是一個靜態外掛，主要用於輔助 pan 和 pinch 互動。 滾動條只是為 pan 服務的。

引入 F2

1.使用 ScrollBar 文件中這樣寫：

const F2 = require('@antv/f2/lib/index');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');

// 註冊外掛 ScrollBar
F2.Chart.plugins.register(ScrollBar); // 這裡進行全域性註冊，也可以給 chart 的例項註冊

// 或者給具體的 chart 例項註冊
const chart = new F2.Chart({
  id: 'canvas',
  plugins: ScrollBar,
});
 

2.使用 pan 文件中這樣寫：

const F2 = require('@antv/f2/lib/index'); // 引入 F2
require('@antv/f2/lib/interaction/pan'); // 引入圖表平移互動

// ... 建立 chart 例項

// 呼叫，需要在 chart.render() 方法之前呼叫
chart.interaction('pan');

接下來你對比我後面的寫法， 在vue-cli中要靈活變動，特別是在路徑方面。

資料結構

資料結構：

[
  {
    provinceShortName: "北京",
    index: 0,
    confirmedCount: 168
  },
  //...
]
 

開始

import F2 from "@antv/f2/lib/index";

這裡引入 index 就夠了，注意我的寫法（ 引入 F2 from 後面的路徑，而不是直接 '@antv/f2' ），官方文件所說的還需要引入 scroll bar 和 pan。如果 pan 需要在使用 vue-cli 時引入肯定像這樣 import pan from "@antv/f2/lib/interaction/pan"，那麼如何使用 pan 這個變數 ？

不成功

1. 下面是不成功的例子，如果你不是吃瓜群眾，可以直接通過文章目錄跳轉到 成功
2. 為什麼要放出來，因為我搞得是柱狀圖，看官方文件柱狀圖的 例子 搞的沒搞出來。

      const originProvinces = ["浙江","廣東","臺灣","江蘇","內蒙古","雲南"];

      const chart = new F2.Chart({
        id: "province-trend",
        // plugins: [ScrollBar],  通過 import 引入不需要在這裡註冊了
        pixelRatio: window.devicePixelRatio
      });

      chart.source(data, {
        provinceShortName: {
          type: "cat",  // 數值型別
          tickCount: 5,
          values: originProvinces  // 對應上面
        },
        confirmedCount: {
          tickCount: 5
        }
      });

      chart
        .interval()
        .position("provinceShortName*confirmedCount")
        .color("provinceShortName");

      chart.tooltip({
        showItemMarker: true,
        background: {
          radius: 2,
          padding: [3, 5]
        },
        onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].title;
          items[0].value = items[0].value + " 人";
        }
      });

      chart.interaction("pan");

      chart.scrollBar({
        xStyle: {
          backgroundColor: "#e8e8e8",
          fillerColor: "#808080",
          offsetY: -2
        }
      });

      chart.render();

• 頭部定義 originProvinces 通過橫座標定義初始顯示的資料，剩餘的資料通過滑動顯示。
• 可以橫向滾動了，但是當橫座標只顯示剛開始定義的 originProvinces, 想著動態改變 originProvinces，鼓搗半天發現不知道在什麼地方觸發。如果您知道原因，歡迎指教！

成功

官方還給了另一個個橫向滾動的 例子，不過是折線圖的，只能硬著頭皮上了，仿照官方折線圖滾動的例子改成如下：

 const chart = new F2.Chart({
        id: "province-trend",
        pixelRatio: window.devicePixelRatio
      });

      chart.source(data, {
        index: {  // 這裡橫座標使用 index，
          min: 0, // 設定剛開始顯示的區間 0-5
          max: 5
        }
      });

      chart.tooltip({
        showCrosshairs: false,
        showItemMarker: false,
        background: {
          radius: 2,
          fill: "#1890FF",
          padding: [3, 5]
        },
        nameStyle: {
          fill: "#fff"
        },
        onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].title;
        }
      });

      // 這裡橫座標應該顯示的是 provinceShortName,
      // 但是用這種方法必須使用 index 了
      // 後面在將橫座標使用類似於起別名的方式改成 provinceShortName
      chart.interval().position("index*confirmedCount");

      chart
        .point()
        .position("index*confirmedCount")
        .style({
          lineWidth: 1,
          stroke: "#fff"
        });

      chart.axis("index", {
        label(text) {
          return {
            fontSize: 14,
            // 在這裡將橫座標顯示為 provinceShortName
            text: data[text].provinceShortName
          };
        }
      });

      chart.interaction("pan");

      chart.scrollBar({
        mode: "x",
        xStyle: {
          offsetY: -5
        }
      });

      chart.render();

這種實現的思路就是不去單獨定義剛開始顯示的橫座標，而是替換為 index （索引），給它定義一個最初顯示的區間。相應的橫座標必須使用 index 了，
但是 index 並不是我們想要顯示的橫座標，轉換思路，在給它使用類似取別名的方式轉換過來就可以了。

大功告成了，這裡只放了關鍵程式碼，其他細節再優化。 僅僅實現圖表滾動，是不是稍微有點麻煩 ？

專案地址

• epidemic
• 預覽點我