微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制。
支持图标类型
饼图 pie圆环图 ring线图 line柱状图 column区域图 area雷达图 radar
1.如何使用？
下载wxcharts-min.js或者wxcharts.js，存放在小程序文件夹目录，我一般存放在utils文件夹下面
.wxml页面中：
<canvas class="canvas" canvas-id="radarGraph"></canvas>
2.部分参数说明
3.简单的示例
wxml页面：
<!--pages/charts/charts.wxml--><!-- 切换栏 --><view class="swiper-tab"><block wx:for="{{swipertab}}" wx:key="sptab"><view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view></block></view><swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange"><swiper-item><scroll-view class="chart-box" scroll-y="true"><view class="title"><text>{{swipertab[0].name}}图</text></view><canvas class="canvas" canvas-id="barGraph"></canvas></scroll-view></swiper-item><swiper-item><scroll-view class="chart-box" scroll-y="true"><view class="title"><text>{{swipertab[1].name}}图</text></view><canvas class="canvas" canvas-id="lineGraph"></canvas></scroll-view></swiper-item><swiper-item><scroll-view class="chart-box" scroll-y="true"><view class="title"><text>{{swipertab[2].name}}图</text></view><canvas class="canvas" canvas-id="pieGraph"></canvas></scroll-view></swiper-item><swiper-item><scroll-view class="chart-box" scroll-y="true"><view class="title"><text>{{swipertab[4].name}}图</text></view><canvas class="canvas" canvas-id="areaGraph"></canvas></scroll-view></swiper-item><swiper-item><scroll-view class="chart-box" scroll-y="true"><view class="title"><text>{{swipertab[3].name}}图</text></view><canvas class="canvas" canvas-id="ringGraph"></canvas></scroll-view></swiper-item><swiper-item><scroll-view class="chart-box" scroll-y="true"><view class="title"><text>{{swipertab[5].name}}图</text></view><canvas class="canvas" canvas-id="radarGraph"></canvas></scroll-view></swiper-item></swiper>
对应的wxss中：
/* pages/charts/charts.wxss */.swiper-tab {height: 40px;line-height: 40px;background: #1b82d1;color: rgba(255, 255, 255, 1);display: flex;position: relative;z-index: 2;flex-direction: row;justify-content: center;align-items: center;}.swiper-tab-list {margin: 0 10px;padding: 0 4px;font-size: 15px;}.on {border-bottom:3px solid #fff;color: #fff;}.title {padding: 10rpx 0 10rpx 20rpx;background-color: #fff;}.title text {border-left: 2px solid #1b82d1;padding-left: 20rpx;}.swiper-box {display: block;height: 100%;width: 100%;overflow: hidden;}swiper-item scroll-view {height: 100%;}scroll-view .canvas {width: 100%;height: 100%;margin-top: 20rpx;}
对应的js中：
var _wxcharts = require('../../utils/wxcharts.js')Page({data: {currtab: 0,swipertab: [{ name: '条形', index: 0 }, { name: '折线', index: 1 }, { name: '饼', index: 2 }, { name: '环形', index: 4 }, { name: '区域', index: 3 }, { name: '雷达', index: 5 }]},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},onReady: function () {// 页面渲染完成this.getDeviceInfo()this.graphShow()},/*** @Explain：获取设备信息*/getDeviceInfo: function () {let that = thiswx.getSystemInfo({success: function (res) {that.setData({deviceW: res.windowWidth,deviceH: res.windowHeight})}})},/*** @Explain：选项卡切换*/tabChange: function (e) {this.setData({ currtab: e.detail.current })this.graphShow()},/*** @Explain：选项卡点击切换*/tabSwitch: function (e) {var that = thisif (this.data.currtab === e.target.dataset.current) {return false} else {that.setData({currtab: e.target.dataset.current})}},/*** @Explain：初始化静态图表*/graphShow: function () {let that = thisswitch (this.data.currtab) {case 0:that.barShow()breakcase 1:that.lineShow()breakcase 2:that.pieShow()breakcase 3:that.areaShow()breakcase 4:that.ringShow()breakcase 5:that.radarShow()break}},pieShow: function () {let pie = {canvasId: 'pieGraph',type: 'pie',series: [{name: 'cat1',data: 50,}, {name: 'cat2',data: 30,}, {name: 'cat3',data: 1,}, {name: 'cat4',data: 1,}, {name: 'cat5',data: 46,}],width: 360,height: 300,dataLabel: true}new _wxcharts(pie)},barShow: function () {let bar = {canvasId: 'barGraph',type: 'column',categories: ['', '', '', '', '', ''],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: 300,height:250}new _wxcharts(bar)},lineShow: function () {let line = {canvasId: 'lineGraph',type: 'line',categories: ['', '', '', '', '', ''],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}new _wxcharts(line)},ringShow: function() {let ring={canvasId: 'ringGraph',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}new _wxcharts(ring)},areaShow: function () {let area = {canvasId: 'areaGraph',type: 'area',categories: ['-08', '-09', '-10', '-11', '-12', ''],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}new _wxcharts(area)},radarShow: function () {let radar={canvasId: 'radarGraph',type: 'radar',categories: ['1', '2', '3', '4', '5', '6'],series: [{name: '成交量1',data: [90, 110, 125, 95, 87, 122]}],width: 320,height: 200,extra: {radar: {max: 150}}}new _wxcharts(radar)}})
