找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序图表charts组件

  [复制链接]
查看: 7109|回复: 119
最佳答案
0 

6

主题

9

帖子

136

积分

新人求带

积分
136
 楼主| 发表于 2017-1-4 16:25:08 | 显示全部楼层 |阅读模式
wx-charts

微信小程序图表工具,charts for WeChat small app

基于canvas绘制,体积小巧

持续优化更新中,请保持关注~ 有任何问题欢迎在Issues中讨论

!!微信小程序0.11.122100版本 (2016-12-21)更新了canvas API, 目前已切换到最新的API, 请下载最新的IDE开发环境

支持图表类型
  • 饼图 pie
  • 圆环图 ring
  • 线图 line
  • 柱状图 column
  • 区域图 area
  • 代码分析 Here


更新记录

  • 动画性能优化
  • x轴文案碰撞避让 2016-12-30
  • add pie chart dataLabel 2016-12-19
  • add animation 2016-12-05
  • build with rollup 2016-12-02
  • add legend 2016-11-29


如何使用

1、直接引用编译好的文件 dist/wxcharts.js 或者 dist/wxcharts-min.js

2、自行编译

  1. git clone https://github.com/xiaolin3303/wx-charts.git
  2. npm install rollup -g
  3. npm install
  4. rollup -c 或者 rollup --config rollup.config.prod.js
复制代码


参数说明

opts Object

opts.canvasId String required 微信小程序canvas-id

opts.width Number required canvas宽度,单位为px

opts.height Number required canvas高度,单位为px

opts.animation Boolean default true 是否动画展示

opts.legend Boolen default true 是否显示图表下方各类别的标识

opts.type String required 图表类型,可选值为pie, line, column, area, ring

opts.categories Array required (饼图、圆环图不需要) 数据类别分类

opts.dataLabel Boolean default true 是否在图表中显示数据内容值

opts.yAxis Object Y轴配置

opts.yAxis.format Function 自定义Y轴文案显示

opts.yAxis.min Number Y轴起始值

opts.yAxis.title String Y轴title

opts.series Array required 数据列表

数据列表每项结构定义

dataItem Object

dataItem.data Array required (饼图、圆环图为Number) 数据

dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案

dataItem.name String 数据名称

dateItem.format Function 自定义显示数据内容

Example

pie chart

  1. var wxCharts = require('wxcharts.js');
  2. new wxCharts({
  3.     canvasId: 'pieCanvas',
  4.     type: 'pie',
  5.     series: [{
  6.         name: 'cat1',
  7.         data: 50,
  8.     }, {
  9.         name: 'cat2',
  10.         data: 30,
  11.     }, {
  12.         name: 'cat3',
  13.         data: 1,
  14.     }, {
  15.         name: 'cat4',
  16.         data: 1,
  17.     }, {
  18.         name: 'cat5',
  19.         data: 46,
  20.     }],
  21.     width: 360,
  22.     height: 300,
  23.     dataLabel: true
  24. });
复制代码

pie.png

pie.gif

ring chart

  1. new wxCharts({
  2.     canvasId: 'ringCanvas',
  3.     type: 'ring',
  4.     series: [{
  5.         name: '成交量1',
  6.         data: 15,
  7.     }, {
  8.         name: '成交量2',
  9.         data: 35,
  10.     }, {
  11.         name: '成交量3',
  12.         data: 78,
  13.     }, {
  14.         name: '成交量4',
  15.         data: 63,
  16.     }],
  17.     width: 320,
  18.     height: 200,
  19.     dataLabel: false
  20. });
复制代码

ring.png
ring.gif

line chart

  1. new wxCharts({
  2.     canvasId: 'lineCanvas',
  3.     type: 'line',
  4.     categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
  5.     series: [{
  6.         name: '成交量1',
  7.         data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
  8.         format: function (val) {
  9.             return val.toFixed(2) + '万';
  10.         }
  11.     }, {
  12.         name: '成交量2',
  13.         data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
  14.         format: function (val) {
  15.             return val.toFixed(2) + '万';
  16.         }
  17.     }],
  18.     yAxis: {
  19.         title: '成交金额 (万元)',
  20.         format: function (val) {
  21.             return val.toFixed(2);
  22.         },
  23.         min: 0
  24.     },
  25.     width: 320,
  26.     height: 200
  27. });
复制代码

line.png
line.gif

columnChart

  1. new wxCharts({
  2.     canvasId: 'columnCanvas',
  3.     type: 'column',
  4.     categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
  5.     series: [{
  6.         name: '成交量1',
  7.         data: [15, 20, 45, 37, 4, 80]
  8.     }, {
  9.         name: '成交量2',
  10.         data: [70, 40, 65, 100, 34, 18]
  11.     }],
  12.     yAxis: {
  13.         format: function (val) {
  14.             return val + '万';
  15.         }
  16.     },
  17.     width: 320,
  18.     height: 200
  19. });
复制代码

column.png
column.gif

areaChart

  1. new wxCharts({
  2.     canvasId: 'areaCanvas',
  3.     type: 'area',
  4.     categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
  5.     series: [{
  6.         name: '成交量1',
  7.         data: [70, 40, 65, 100, 34, 18],
  8.         format: function (val) {
  9.             return val.toFixed(2) + '万';
  10.         }
  11.     }, {
  12.         name: '成交量2',
  13.         data: [15, 20, 45, 37, 4, 80],
  14.         format: function (val) {
  15.             return val.toFixed(2) + '万';
  16.         }
  17.     }],
  18.     yAxis: {
  19.         format: function (val) {
  20.             return val + '万';
  21.         }
  22.     },
  23.     width: 320,
  24.     height: 200
  25. });
复制代码

area.png
area.gif

测试

iPhone 6s, IOS 9.3.5
小米4, ANDORID 6.0.1
兼容性问题请在Issue中提出

一些问题的说明汇总

wx-charts自适应屏幕宽度的问题

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

4

帖子

53

积分

新人求带

积分
53
发表于 2017-1-4 17:00:23 | 显示全部楼层
学习了,谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

31

帖子

200

积分

新人求带

积分
200
发表于 2017-1-4 17:15:22 | 显示全部楼层
支持楼主  看看
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

230

积分

新人求带

积分
230
发表于 2017-1-4 22:49:42 | 显示全部楼层
小程序的图标功能只能满足基本的统计需求。太弱了。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

123

帖子

5621

积分

S1

积分
5621
发表于 2017-1-5 08:09:44 | 显示全部楼层
学习了,谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

38

帖子

1786

积分

专家路上

积分
1786
发表于 2017-1-5 14:01:46 | 显示全部楼层
灰常给力哦
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

70

积分

新人求带

积分
70
发表于 2017-1-5 14:48:25 | 显示全部楼层
sssssssssssssss
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

139

积分

新人求带

积分
139
发表于 2017-1-6 15:36:01 | 显示全部楼层
撒旦是户户户
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

131

积分

新人求带

积分
131
发表于 2017-1-6 15:41:52 | 显示全部楼层
感谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

13

帖子

99

积分

新人求带

积分
99
发表于 2017-1-8 14:37:04 | 显示全部楼层
微信小程序图表charts组件 [修改]
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com