第一次使用AntV中的F2

數據可視化插件——AntV

AntV 是螞蟻金服全新一代數據可視化解決方案，致力於提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐

日常開發中你們都會接觸一些數據可視化工具，經常使用的echarts，Highcharts，D3等。
我的以爲AntV的UI好看一些，再加上F2是移動端可視化方案，因此就有了接下來的爬坑過程。

開始使用

vue項目開發，我寫的是折線面積圖+滑動

• 下載

  npm install @antv/f2 --save
  直接引入就ok
  const F2 = require('@antv/f2');

• 開始畫圖
  建立canvas,指定id

  <canvas id="myChart" width="400" height="260"></canvas>

  開始繪製

  // F2 對數據源格式的要求，僅僅是 JSON 數組，數組的每一個元素是一個標準 JSON 對象。
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];
  
  // Step 1: 建立 Chart 對象
  const chart = new F2.Chart({
    id: 'myChart',
    pixelRatio: window.devicePixelRatio // 指定分辨率
  });
  
  // Step 2: 載入數據源
  chart.source(data);
  
  // Step 3：建立圖形語法，繪製柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸
  chart.interval().position('genre*sold').color('genre');
  
  // Step 4: 渲染圖表
  chart.render();

  嘿嘿，都是copy官網的

相關API使用

最經常使用的，畢竟其餘的我也不會

• Axis-座標軸配置
  這個我主要用來自定義X軸Y軸內容。
  就那這個數據來舉例吧

list: [
    {"date": "2018-08-08","record": 166},
    {"date": "2019-01-01","record": 174},
    {"date": "2019-01-02","record": 166},
    {"date": "2019-01-03","record": 166},
    {"date": "2019-01-05","record": 187},
    {"date": "2019-01-06","record": 189},
    {"date": "2019-01-17","record": 156},
    {"date": "2019-04-18","record": 231}
]
//date爲X軸，record Y軸
chart.axis('date', {
    label: function label(text, index, total) {
        var cfg = {
            textAlign: 'center',//定義樣式
        };
        if (index === 0) {
            cfg.textAlign = 'start';
            cfg.text = '+' + text;//能夠更改X軸數據格式等
            cfg.fill = '#F5222D';//文字顏色
        }
        if (index > 0 && index === total - 1) {
            cfg.textAlign = 'end';
        }
        return cfg;
    }
});
//定義X軸Y軸
var defs = {
    date: {
        type: 'timeCat',//類型爲日期
        mask: 'YY/MM/DD',//日期格式
        tickCount: 4,//區間，寫幾就有幾個區間
    },
    record: {
        tickCount: 5,
        min: 0,//軸的最小值&最大值
        alias: '身高'//定義這個軸是啥類型
    }
};

chart.source(this.list, defs);//載入數據

• tooltip-自定義提示
  這一塊沒有研究透徹，本身看看吧連接

chart.tooltip(false)//直接關閉，沒任何提示
chart.tooltip({
    showItemMarker: false,
    onShow: function onShow(ev) {
      //自定義提示內容
      var items = ev.items;
      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = items[0].value + "%";
    }
});

• guide

chart.guide().text({
    position: ['min', 'max'],
    content: '提示',
    style: {
        textBaseline: 'middle',
        textAlign: 'start'
    },
    offsetY: -23,
    offsetX: -25
});

就是這個東西

• 線，面積，點

//先X軸後Y軸
chart.line().position("date*record").color("#FFB024");//線
chart.area().position("date*record").style({fillStyle: "l(90) 0:rgba(255,202,106,1) 1:rgba(255,201,104,0.3)",fillOpacity: 1});//面積漸變色
chart.point().position('date*record').color('red');//點

滑動+滾動條

手機上看圖，若是X軸數據過多，都堆一塊兒了，因此就用滑動了

//引入
const ScrollBar = require("@antv/f2/lib/plugin/scroll-bar");
const pan = require("@antv/f2/lib/interaction/pan");
//註冊
var chart = new F2.Chart({
    id: 'myChart',
    pixelRatio: window.devicePixelRatio,
    plugins: [ScrollBar, pan]
});
//官網用法
//X軸爲1955-2015，5年一個區間，載入數據都時候定義一個最大最小都區間
chart.source(data, {
   release: {
      min: 1990,
      max: 2010
   }
});
chart.interaction('pan');
// 定義進度條
chart.scrollBar({
    mode: 'x',
    xStyle: {
        offsetY: -5
    }
});

個人寫法

//由於咱們X軸日期格式爲2019-01-01這種 換算了一下
當數據大於五條當時候開始滑動
const a = 1000000000
var dataMap = data.map((item, index) => {
    return {
        date: index + a,
        record: item.record
    }
})
        
var min = a, max = a + 4, tickCount = 5;

if (dataMap.length > 5) {
    tickCount = 5;
    chart.scrollBar({
        mode: "x",
        xStyle: {
            backgroundColor: "#e8e8e8",
            fillerColor: "#808080",
            offsetY: -2
        }
    });
    chart.interaction("pan");
}else if(dataMap.length == 1){
    max = a;
    tickCount = 2;
    chart.point().position("date*record").color("#FFB024");
}else{
    max = dataMap.length +a -1
    tickCount = dataMap.length;
}
            
chart.source(dataMap,{
    date: {
        min:min,
        max:max,
        tickCount:tickCount
    }
})
chart.axis('date', {
    label: function label(text, index, total) {
        const cfg = {
            textAlign: 'center'
        }
        cfg.text = data[text-a].date
        return cfg;
    }
});

結語

第一次發文章，可能不是太好，但願你們喜歡，原諒我不會弄動圖，因此沒放效果圖。