微信小程序实战篇:基于wxcharts.js绘制移动报表

花名提莫 2018-03-14 16:13:05 ⋅ 175 阅读

微信小程序图表插件(wx-charts)是基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。


如上图所示,我们基于wxcharts.js 来实现订单统计报表。

导入wxcharts.js


将wxcharts.js 存放在utils目录

column.wxml

<view class="container">        
   <!--标题-->    <view class="title">        {{chartTitle}}    </view>    <!--绘制canvas-->    <canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="touchHandler">
   </canvas>
</view>

coumn.js

引入wxcharts.js
var wxCharts = require('../../../utils/wxcharts.js');
初始化数据
var app = getApp();
var columnChart = null;
var chartData = {    main: {        
   title: '订单统计',        
   data: [23, 28, 35, 54, 95],        
   categories: ['2013', '2014', '2015', '2016', '2017']    }     };
加载报表数据
Page({    
data: {        
       chartTitle: '总订单',        
       isMainChartDisplay: true    },    
onReady: function (e) {        
   var windowWidth = 320;        
   try {          
           var res = wx.getSystemInfoSync();            windowWidth = res.windowWidth;        } catch (e) {          
           console.error('getSystemInfoSync failed!');        } columnChart = new wxCharts({            
   canvasId: 'columnCanvas',            
   type: 'column',            
   animation: true,            
   categories: chartData.main.categories,            
   series: [{                
       name: '订单量',                
       color:'#188df0',                
       data: chartData.main.data,                
       format: function (val, name) {                    
           return val.toFixed(2) + '万';        }   }],            
   yAxis: {                
       format: function (val) {                    
           return val + '万';        },                
       min: 0    },            
   xAxis: {                
       disableGrid: false,                
       type: 'calibration'    },            
   extra: {                
       column: {                    
           width: 15,        },                
       legendTextColor: '#000000'    },            
   width: windowWidth,            
   height: 200,        });    } });

直接copy以上代码就可以查看效果哦~~~

wx-charts更多特性

支持报表类型
  1. 饼图 pie

  2. 圆环图 ring

  3. 线图 line

  4. 柱状图 column

  5. 区域图 area

  6. 雷达图 radar

参数说明
opts                         Objectopts.canvasId                String required                    微信小程序canvas-id
opts.width                   Number required                canvas宽度,单位为px
opts.height                  Number required                canvas高度,单位为px
opts.title                   Object           (only for ring chart)
opts.title.name              String           标题内容
opts.title.fontSize          Number            标题字体大小(可选,单位为px)
opts.title.color             String           标题颜色(可选)
opts.subtitle                Object         (only for ring chart)
opts.subtitle.name           String           副标题内容
opts.subtitle.fontSize       Number          副标题字体大小(可选,单位为px)
opts.subtitle.color          String          副标题颜色(可选)
opts.animation               Boolean default true         是否动画展示
opts.legend                  Boolen default true       是否显示图表下方各类别的标识
opts.type                    String required 图表类型,可选值为pie, line, column, area……
opts.categories              Array required       (饼图、圆环图不需要) 数据类别分类
opts.dataLabel               Boolean default true     是否在图表中显示数据内容值
opts.dataPointShape          Boolean default true   是否在图表中显示数据点图形标识
opts.xAxis                   Object       X轴配置
opts.xAxis.disableGrid       Boolean default false      不绘制X轴网格
opts.yAxis                   Object    Y轴配置
opts.yAxis.format            Function           自定义Y轴文案显示
opts.yAxis.min               Number        Y轴起始值
opts.yAxis.max               Number           Y轴终止值
opts.yAxis.title             String       Y轴title
opts.yAxis.disabled          Boolean default false        不绘制Y轴
opts.series                  Array required        数据列表
结构定义
dataItem                      ObjectdataItem.data                 Array required (饼图、圆环图为Number) 数据dataItem.color                String 例如#7cb5ec 不传入则使用系统默认配色方案dataItem.name                 String 数据名称dateItem.format               Function 自定义显示数据内容

好了如果想要了解更多微信小程序内容请关注“IT实战联盟”微信公众号!也可以留言和作者交流 获取源码哦!!!



全部评论: 0

    我有话说:

    程序实战:商品属性联动选择(案例)

    本期的程序实战来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序电商实战-首页(下)

    上一程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-首页(上)

    上一程序电商实战-入门 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序电商实战-入门

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一下准备前期准备工作~~

    程序实战:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序实战程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序实战实现抖音评论效果

    我们在写程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个抖音评论效果的程序......

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序电商实战-购物车(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序抖音实战-首页(下)

    抖音程序首页动态数据获取

    程序电商实战-购物车(下)

    我们继续接着昨天的购物车写,主要把剩下的数量加减 template 模板、选中计算功能实现掉!

    程序商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果!

    程序 - iconfont 图标字体

    你还在使用图片作为程序的图标?大猪告诉大家如何在程序上使用iconfont字体图标