摘要：開(kāi)始使用項(xiàng)目開(kāi)發(fā)，我寫(xiě)的是折線面積圖滑動(dòng)下載直接引入就開(kāi)始畫(huà)圖創(chuàng)建指定開(kāi)始繪制對(duì)數(shù)據(jù)源格式的要求，僅僅是數(shù)組，數(shù)組的每個(gè)元素是一個(gè)標(biāo)準(zhǔn)對(duì)象。

AntV 是螞蟻金服全新一代數(shù)據(jù)可視化解決方案，致力于提供一套簡(jiǎn)單方便、專(zhuān)業(yè)可靠、無(wú)限可能的數(shù)據(jù)可視化最佳實(shí)踐

平常開(kāi)發(fā)中大家都會(huì)接觸一些數(shù)據(jù)可視化工具，常用的echarts，Highcharts，D3等。
個(gè)人覺(jué)得AntV的UI好看一些，再加上F2是移動(dòng)端可視化方案，所以就有了接下來(lái)的爬坑過(guò)程。

vue項(xiàng)目開(kāi)發(fā)，我寫(xiě)的是折線面積圖+滑動(dòng)

下載

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

開(kāi)始畫(huà)圖
創(chuàng)建canvas,指定id

開(kāi)始繪制

// F2 對(duì)數(shù)據(jù)源格式的要求，僅僅是 JSON 數(shù)組，數(shù)組的每個(gè)元素是一個(gè)標(biāo)準(zhǔn) JSON 對(duì)象。
const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 },
];

// Step 1: 創(chuàng)建 Chart 對(duì)象
const chart = new F2.Chart({
  id: "myChart",
  pixelRatio: window.devicePixelRatio // 指定分辨率
});

// Step 2: 載入數(shù)據(jù)源
chart.source(data);

// Step 3：創(chuàng)建圖形語(yǔ)法，繪制柱狀圖，由 genre 和 sold 兩個(gè)屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸
chart.interval().position("genre*sold").color("genre");

// Step 4: 渲染圖表
chart.render();

嘿嘿，都是copy官網(wǎng)的

最常用的，畢竟其他的我也不會(huì)

Axis-坐標(biāo)軸配置
這個(gè)我主要用來(lái)自定義X軸Y軸內(nèi)容。
就那這個(gè)數(shù)據(jù)來(lái)舉例吧

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軸數(shù)據(jù)格式等
            cfg.fill = "#F5222D";//文字顏色
        }
        if (index > 0 && index === total - 1) {
            cfg.textAlign = "end";
        }
        return cfg;
    }
});
//定義X軸Y軸
var defs = {
    date: {
        type: "timeCat",//類(lèi)型為日期
        mask: "YY/MM/DD",//日期格式
        tickCount: 4,//區(qū)間，寫(xiě)幾就有幾個(gè)區(qū)間
    },
    record: {
        tickCount: 5,
        min: 0,//軸的最小值&最大值
        alias: "身高"http://定義這個(gè)軸是啥類(lèi)型
    }
};

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

tooltip-自定義提示
這一塊沒(méi)有研究透徹，自己看看吧鏈接

chart.tooltip(false)//直接關(guān)閉，沒(méi)任何提示
chart.tooltip({
    showItemMarker: false,
    onShow: function onShow(ev) {
      //自定義提示內(nèi)容
      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
});

就是這個(gè)東西

線，面積，點(diǎn)

//先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");//點(diǎn)

手機(jī)上看圖，如果X軸數(shù)據(jù)過(guò)多，都堆一起了，所以就用滑動(dòng)了

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

//因?yàn)槲覀僗軸日期格式為2019-01-01這種 換算了一下
當(dāng)數(shù)據(jù)大于五條當(dāng)時(shí)候開(kāi)始滑動(dòng)
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;
    }
});

第一次發(fā)文章，可能不是太好，希望大家喜歡，原諒我不會(huì)弄?jiǎng)訄D，所以沒(méi)放效果圖。