微信小程序实战篇:基于wxcharts.js绘制移动报表
前言
微信小程序图表插件(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更多特性
支持报表类型
- 饼图 pie
- 圆环图 ring
- 线图 line
- 柱状图 column
- 区域图 area
- 雷达图 radar
参数说明
opts Object
opts.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 Object
dataItem.data Array required (饼图、圆环图为Number) 数据
dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案
dataItem.name String 数据名称
dateItem.format Function 自定义显示数据内容
好了如果想要了解更多微信小程序内容请关注“IT实战联盟”微信公众号!也可以留言和作者交流 获取源码哦!!!
作者:IT实战联盟Lin
链接:https://www.jianshu.com/p/04ddbabda874
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
微信小程序实战篇:基于wxcharts.js绘制移动报表的更多相关文章
- 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...
- 前端微信小程序实战篇
电商底部导航栏的制作 我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...
- 微信小程序实战篇-图片的预览、二维码的识别
开篇 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码,各种翻阅查找,采坑很多,浪费了很多时间,在这里记录下需要注意的点,以及对小程序官方提供的API做一个正确和清晰的认知,希 ...
- 微信小程序实战篇-电商(一)
我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心.所以我们按照这个来做吧. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个 ...
- 微信小程序实战篇-分类页面制作
https://blog.csdn.net/u012927188/article/details/73650264
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 —— 微信小程序实战商城 ...
随机推荐
- 降临(线段树优化dp)
降临 选定点i会有代价\(c_i\),如果一个区间j内的点全被选择,就可以获得回报\(p_j\).点数和区间个数\(<1e5\). 还以为是线段树优化网络流(50万个点200万条边看上去很可做的 ...
- 2019.2.10考试T2, 多项式求exp+生成函数
\(\color{#0066ff}{ 题目描述 }\) 为了减小文件大小,这里不写一堆题目背景了. 请写一个程序,输入一个数字N,输出N个点的森林的数量.点有标号. 森林是一种无向图,要求图中不能存在 ...
- spring boot +Thymeleaf+mybatis 集成通用PageHelper,做分页
controller: /** * 分页查询用户 * @param request * @param response * @return * @throws Exception */ @ ...
- SprimgMVC学习笔记(一)—— SpringMVC入门
一.什么是 SpringMVC ? 在介绍什么是 SpringMVC 之前,我们先看看 Spring 的基本架构.如下图: 我们可以看到,在 Spring 的基本架构中,红色圈起来的 Spring W ...
- CodeForces - 124B-Permutations(DFS)
You are given n k-digit integers. You have to rearrange the digits in the integers so that the diffe ...
- 毕业设计 python opencv实现车牌识别 矩形矫正
主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...
- JS匿名函数以及arguments.callee的调用
var res = (function (n) { if( n>1 ) { return n + arguments.callee( n-1 ); } else { ...
- Java中的两个类:Desktop和SystemTray
在JDK6中 ,AWT新增加了两个类:Desktop和SystemTray,前者可以用来打开系统默认浏览器浏览指定的URL,打开系统默认邮件客户端给指定的邮箱发邮件,用默认应用程序打开或编辑文件(比如 ...
- day19 MRO C3算法 super()
1. MRO(Method Resolution Order):方法解析顺序,主要用于在多继承时判断调的属性的路径(来自于哪个类). 1.Python语言包含了很多优秀的特性,其中多重继承就是其中之一 ...
- web前端开发道路
https://github.com/z-jingjie/developer-roadmap-zh-CN