wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)

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

基于canvas绘制,体积小巧

持续优化更新中,请保持关注~

支持图表类型

  • 饼图 pie
  • 圆环图 ring
  • 线图 line
  • 柱状图 column
  • 区域图 area

代码分析 Here

如何使用

1、直接引用编译好的文件 dist/charts.js

2、自行编译

[AppleScript]  纯文本查看  复制代码
git clone github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
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.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
[AppleScript]  纯文本查看  复制代码
var Charts = require('charts.js');
new Charts({
    canvasId: 'pieCanvas',
    type: 'pie',
    series: [{
        name: '成交量1',
        data: 15,
    }, {
        name: '成交量2',
        data: 35,
    }, {
        name: '成交量3',
        data: 78,
    }, {
        name: '成交量4',
        data: 63,
    }],
    width: 320,
    height: 200,
    dataLabel: false
});



wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第1张图片

wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第2张图片

ring chart
[AppleScript]  纯文本查看  复制代码
new Charts({
    canvasId: 'pieCanvas',
    type: 'ring',
    series: [{
        name: '成交量1',
        data: 15,
    }, {
        name: '成交量2',
        data: 35,
    }, {
        name: '成交量3',
        data: 78,
    }, {
        name: '成交量4',
        data: 63,
    }],
    width: 320,
    height: 200,
    dataLabel: false
});



wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第3张图片

wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第4张图片

line chart
[AppleScript]  纯文本查看  复制代码
new Charts({
    canvasId: 'lineCanvas',
    type: 'line',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: '成交量1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }, {
        name: '成交量2',
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }],
    yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    width: 320,
    height: 200
});



wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第5张图片

wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第6张图片

columnChart
[AppleScript]  纯文本查看  复制代码
new Charts({
    canvasId: 'columnCanvas',
    type: 'column',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80]
    }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18]
    }],
    yAxis: {
        format: function (val) {
            return val + '万';
        }
    },
    width: 320,
    height: 200
});



wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第7张图片

wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第8张图片

areaChart
[AppleScript]  纯文本查看  复制代码
new Charts({
    canvasId: 'areaCanvas',
    type: 'area',
    categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
    series: [{
        name: '成交量1',
        data: [70, 40, 65, 100, 34, 18],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }, {
        name: '成交量2',
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }],
    yAxis: {
        format: function (val) {
            return val + '万';
        }
    },
    width: 320,
    height: 200
});



wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第9张图片

wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)_第10张图片


项目地址及下载:


本帖隐藏的内容

https://github.com/xiaolin3303/wx-charts

 wx-charts-master.zip (307.49 KB, 下载次数: 69)

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1097&extra=page%3D1

你可能感兴趣的:(【微信小程序点滴知识,】)