公衆號 vue使用f2 總結

安裝  npm install @antv/f2 --save

引入 import F2 from "@antv/f2";;

html 

<canvas :id="f2id"></canvas>

js

            this.chart = new F2.Chart({
                id: this.f2id, // f2id 爲 字符串 當頁面中圖表的唯一id 
                pixelRatio: window.devicePixelRatio,
                width: window.screen.availWidth,
                height: 300
            });


            this.chart.source(this.datalist, {
                sales: {               //sales爲自己定義的數據列表中的屬性  year同樣
                    tickCount: 10, //定義 該屬性的座標軸刻度最多顯示幾個
                    min: 0 //從0開始顯示   默認的顯示爲從數據中的最小值開始顯示
                },
                year: {
                    tickCount: 7
                }
            });
            this.chart.tooltip({
                showItemMarker: false,
                onShow: function onShow(ev) { //設置在滑動時顯示的當前值
                    const items = ev.items;
                    items[0].name = null;
                    items[0].name = items[0].title;
                    items[0].value = " " + items[0].value;
                }
            });
            this.chart.line().position("year*sales").color('#0ec6b4');

            this.chart.render();

 

重新賦值數據

this.chart.changeData(val);