微信小程序图表插件-wx-charts

微信小程序是目前非常流行的一种应用形式，在它的 API 中缺少了图表相关的功能 ，wx-charts 就是一个可以为小程序提供图表支持的插件。

---

简介

wx-charts 是一款纯 JavaScript （ES6）编写的小程序图表插件，没有依赖任何第三方图表库。有多达 15 种不同的图表类型可供选择，包括柱状图、折线图、饼状图等，而且每种图标类型都有自己独特的一些配置属性，满足不同需求时的个性化设置。

另外，wx-charts 还拥有一个灵活强大的事件机制，可以监听不同的触摸事件，帮助用户实现更多自定义的效果。

主要特性

• 独立、轻量级，没有依赖；
• 面向对象编程范式，易于扩展和维护；
• 15 种不同类型的图表可供选择，支持个性化设置；
• 灵活的事件机制，定制化强；
• 支持大数据量的渲染，图表渲染速度快。

---

安装

通过 npm 安装 wx-charts：

npm install wx-charts --save

使用方法：

// 引入插件
let wxCharts = require('../../utils/wxcharts.js');
// 新建图表示例
let chart = new wxCharts({
    // 配置项
    canvasId: 'columnCanvas',
    type: 'column',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: '成交量',
        data: [15, 20, 45, 37, 58, 70]
    }, {
        name: '成交额',
        data: [8000, 18000, 21000, 24000, 28000, 35000]
    }],
    yAxis: {
        format: function (val) {
            return val + '万';
        }
    },
    width: 375,
    height: 200
});

---

配置示例

这是一个比较完整的 wxCharts 配置示例：

let chart = new wxCharts({
    canvasId: 'lineCanvas',
    type: 'line',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    animation: true,
    series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 56, 37],
        format: function (val, name) {
            return val.toFixed(2) + '万';
        }
    }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18],
        format: function (val, name) {
            return val.toFixed(2) + '万';
        }
    }],
    xAxis: {
        disableGrid: false
    },
    yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 56, 37],
        format: function (val, name) {
            return val.toFixed(2) + '万';
        }
    }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18],
        format: function (val, name) {
            return val.toFixed(2) + '万';
        }
    }],
    xAxis: {
        disableGrid: false
    },
    yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    width: 375,
    height: 200
});

---

总结

wx-charts 是一个功能齐全，可定制性强的小程序图表插件。它不依赖任何第三方库，可以轻松地扩展功能和维护代码，使用方法简洁，支持多种类型的图表。如果你需要在你的小程序中使用图表，不要错过 wx-charts。