公众号 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);