本文共 1779 字，大约阅读时间需要 5 分钟。

1.首先，下载wxcharts.js文件放入项目utils中

2.再将npm包放入项目中（如下图）

3.构建npm

点击编辑器上方导航栏 工具-构建npm (在此步骤之前需要初始化npm 在项目根目录使用命令行 npm init即可) 在项目的本地设置中 也要勾选使用npm模块

4.在使用页面的js中引入

5.在页面的js中配置

在页面展示onShow方法中添加需要展示的图（具体配置信息请看）

onShow: function () {    setTimeout(function(){      new charts({        canvasId: 'lineCanvas',        type: 'line',        categories: _this.data.lineCate,//分类        animation: false,//是否动画展示        background: '#f5f5f5',        series: [{            name: '体重',            data: _this.data.lineData,            format: function (val, name) {                return val.toFixed(1) + 'KG';            }        }],        xAxis: {            disableGrid: true        },        yAxis: {            title: '体重',            format: function (val) {                return val.toFixed(1);            },            min: 50        },        width: 300,        height: 180,        dataLabel: false,        dataPointShape: true,        extra: {            lineStyle: 'curve'        }    });    },2000)      }

6.wxml展示

在wxml页面使用<canvas></canvas>标签展示

7.书写展示数据的接口

//折线图数据    public function line()    {        //查询本月所有体重        $data['weight_all'] = Userinfo::where('time','between','2021-05-01,2021-05-31')->column('weight');        //查询本月所有日期        $data['time_all'] = Userinfo::where('time','between','2021-05-01,2021-05-31')->column('time');        if($data){            return json(['code'=>200,'msg'=>'请求成功','data'=>$data]);        }else{            return json(['code'=>400,'msg'=>'网络错误','data'=>'']);        }    }

这里的weight_all是用户输入的所有体重(y轴)数据 time_all是所有日期(x轴)数据

数据仅作展示，详细划分请自己改写接口

8.定时器使用

定时器使用是因为数据请求接口有一定延迟，同步展示wxcharts会获取不到数据，因此进行延迟2秒展示

9.分类与x轴关系

这里的lineCate既是分类依据（根据每天分类）也是x轴的数据（哪一天）

10.y轴信息

11.总结

难点：微信小程序的npm构建，以及对wx-charts各项配置的掌握

对照参数的中文意思，就能熟练使用

掌握使用流程

如果对您有帮助，请您点赞此文章！感谢！

转载地址：http://jomki.baihongyu.com/