微信小程序折线图表折线图加区域图

一个执着的小前端

于 2020-06-12 13:59:40 发布

阅读量1.2k

点赞数 3

分类专栏：小程序 canvas 文章标签：小程序 canvas

本文链接：https://blog.youkuaiyun.com/caoyuna1998/article/details/106713982

版权

本文介绍了如何在微信小程序中使用@antv/f2-canvas插件创建折线图表和区域图。首先通过npm安装依赖，然后在json文件中配置，并在js文件中处理数据。数据格式中'City'字段用于图表颜色配置，不配置将导致无颜色显示，详细配置可参考@antv官方文档。最后在wxml文件中进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先来个效果图
在这里插入图片描述

这里我用的是插件@antv/f2-canvas（安装的方法如下）

npm init 此处如果直接使用官方npm install 可能会出现没有node_modules错误

npm install --production 建议使用–production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小

npm i @antv/f2-canvas 安装微信小程序 F2 图表组件

安装好依赖包之后，运行（点击开发者工具顶部详情，勾选使用npm模块，再点击菜单栏中工具下的构建npm即可运行）
在这里插入图片描述

json文件里加这个

"usingComponents": {
   
    "ff-canvas": "@antv/f2-canvas"
  }

js文件

const F2 = require('@antv/wx-f2');
let chart = null;
page({
   
	data:{
   
		opts: {
   
	      lazyLoad: true
	    },
	},
	// 折线图
  getMothElectro: function (type) {
   
    let that = this;
    // 体重曲线表
    app.post('/user/Charts', {
   
      type: type
    }).then((res) => {
   
      // console.log(res)
      that.setData({
   
        list: res.data.list
      })
      //这里是把后台返的数据做一下处理
   
      let arr = [];
      let array1 = [];
      let array2 = [];
      let weightArr = [];
      // for (let value of res.chart) {
   
      for (let i = 0; i < res.chart.length; i++) {
   
        let value = res.chart[

最低0.47元/天解锁文章