微信小程序+anvt f2+连接后台数据

前言：

新学的微信小程序，所有的都是现学现用的，本身对小程序和f2的使用不是很懂，所以一路做下来磕磕绊绊的。总算是从最初的构建到连接后台数据成功展示了。在这期间百度了一下f2的例子，发现不怎么多，想想怕以后遗忘，我还是做下笔记吧。

1、百度看见很多人都npm安装，但是我自己尝试了一下，发现安装不了，我也不知道为什么。于是就下载了相关的组件包。

这个是在GitHub里面下载下来的，相关链接，我们没有保存，你们可以百度找找看。

下载组件包后面就是开始用了，首先现在json里面引进这个组件包

wxml：

<view class="echartsBox">

            <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>

</view>

wxss：这个一定要给放置canvas的view设置宽高，不然会报错的

js文件：

 

initChart(canvas, width, height) { // 使用 F2 绘制图表

        // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。

        const data = this.data.echartData

        console.log(data, 'data')

        // 创建chart对象

        chart = new F2.Chart({

            el: canvas,

            width,

            height,

            pixelRatio: wx.devicePixelRatio

        });

        // 载入数据源

        chart.source(data, {

            // 30天，label展示部分，其余隐藏，但是tooltip可查看的到

            name: {

                range: [0, 1],

                type: 'timeCat',

                mask: 'MM-DD'

            },

            value: {

                tickCount: 5

            }

        });

        // 竖着展示x轴的坐标

        // chart.axis('name', {

        //  tickLine: {

        //      length: 4,

        //      stroke: '#e8e8e8',

        //      lineWidth: 1

        //  },

        //  label: {

        //      textAlign: 'start',

        //      textBaseline: 'middle',

        //      rotate: Math.PI / 2

        //  }

        // });

        // 图例

        chart.legend({

            custom: true,

            position: 'top',

            items: [{

                name: '隐患数据统计',

                marker: 'square',

                fill: 'red'

            }]

        });

        // 图表的提示信息

        chart.tooltip({

            showItemMarker: false,

            onShow(ev) {

                const {

                    items

                } = ev;

                items[0].name = null;

                items[0].name = items[0].title;

                items[0].value = '使用量 ' + items[0].value;

            }

        });

        // 创建图形语法，绘制柱状图

        chart.line().position('name*value'); //折线图

        // chart.interval().position('year*sales'); //柱状图

        // 创建实例

        chart.render();

        return chart;

    }

最后：要记得初始化的时候就要调用这两个函数了，不然进来没有数据哦

附赠效果图：

 结论：感觉可以优化的地方好多，还是得继续学习，希望这个笔记可以帮助到别人。哈哈哈，给自己加油！