1. 程式人生 > >這個菜鳥花幾個小時寫的 DEMO 被碼雲推薦上首頁 ?

這個菜鳥花幾個小時寫的 DEMO 被碼雲推薦上首頁 ?

寫在最前

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

思路

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

1.Interaction

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

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

2.ScrollBar

Scroll bar 是一個靜態外掛,主要用於輔助 panpinch 互動。 滾動條只是為 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 barpan。如果 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
  • 預覽點我