“用wx-charts插件在微信小程序展示图表”的版本间的差异
来自CloudWiki
(→导入wx-charts) |
(→wx-charts的使用) |
||
(未显示同一用户的1个中间版本) | |||
第190行: | 第190行: | ||
height: 200px; | height: 200px; | ||
}</nowiki> | }</nowiki> | ||
+ | |||
+ | 写好后,编译一下,效果如图: | ||
+ | |||
+ | [[文件:wx1-35.png]] | ||
+ | |||
+ | ===饼图=== | ||
+ | [[文件:wx1-36.png]] | ||
+ | |||
+ | <nowiki>pic2 = new wxCharts({ | ||
+ | canvasId: 'canvas2', | ||
+ | type: 'pie', | ||
+ | series: [{ name: '一班', data: 50 }, { name: '二班', data: 30 }, { name: '三班', data: 20 }, { name: '四班', data: 18 }, { name: '五班', data: 8 }], | ||
+ | width: windowWidth, | ||
+ | height: 200, | ||
+ | |||
+ | dataLabel: true, | ||
+ | });</nowiki> | ||
+ | |||
+ | ===其他图形=== | ||
+ | <nowiki>pic3 = new wxCharts({ | ||
+ | canvasId: 'canvas3', | ||
+ | dataPointShape: "circle", | ||
+ | type: 'line', | ||
+ | extra: { | ||
+ | lineStyle: 'curve' //线条的形状(弧形) | ||
+ | }, | ||
+ | categories: ['2012', '2013', '2014', '2015', '2016', '2017'], | ||
+ | series: [{ | ||
+ | name: '成交量1', | ||
+ | data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//设置某一个值为null会出现断层 | ||
+ | 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); | ||
+ | }, | ||
+ | fontColor: "red", | ||
+ | titleFontColor: "red", | ||
+ | min: 0, | ||
+ | gridColor: "red" | ||
+ | |||
+ | }, | ||
+ | width: windowWidth, | ||
+ | height: 200, | ||
+ | dataLabel: true | ||
+ | }); | ||
+ | pic4 = new wxCharts({ | ||
+ | canvasId: 'canvas4', | ||
+ | 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: windowWidth, | ||
+ | height: 200 | ||
+ | }); | ||
+ | pic5 = new wxCharts({ | ||
+ | animation: true, | ||
+ | canvasId: 'canvas5', | ||
+ | type: 'ring', | ||
+ | extra: { | ||
+ | ringWidth: 10,//圆环的宽度 | ||
+ | pie: { | ||
+ | offsetAngle: -45//圆环的角度 | ||
+ | } | ||
+ | }, | ||
+ | title: { | ||
+ | name: '70%', | ||
+ | color: '#7cb5ec', | ||
+ | fontSize: 25 | ||
+ | }, | ||
+ | subtitle: { | ||
+ | name: '收益率', | ||
+ | color: '#666666', | ||
+ | fontSize: 15 | ||
+ | }, | ||
+ | series: [{ | ||
+ | name: '成交量1', | ||
+ | data: 15, | ||
+ | stroke: false | ||
+ | }, { | ||
+ | name: '成交量2', | ||
+ | data: 35, | ||
+ | stroke: false | ||
+ | }, { | ||
+ | name: '成交量3', | ||
+ | data: 78, | ||
+ | stroke: false | ||
+ | }, { | ||
+ | name: '成交量4', | ||
+ | data: 63, | ||
+ | stroke: false | ||
+ | }], | ||
+ | disablePieStroke: true, | ||
+ | width: windowWidth, | ||
+ | height: 200, | ||
+ | dataLabel: true, | ||
+ | legend: false, | ||
+ | padding: 0 | ||
+ | }); | ||
+ | pic6 = new wxCharts({ | ||
+ | animation: true, | ||
+ | canvasId: 'canvas6', | ||
+ | type: 'radar', | ||
+ | categories: ['1', '2', '3', '4', '5', '6'], | ||
+ | series: [{ | ||
+ | name: '成交量1', | ||
+ | data: [90, 110, 125, 95, 87, 122] | ||
+ | }, { | ||
+ | name: '成交量2', | ||
+ | data: [190, 210, 105, 35, 27, 102] | ||
+ | }], | ||
+ | width: windowWidth, | ||
+ | height: 200, | ||
+ | extra: { | ||
+ | radar: { | ||
+ | max: 200//雷达数值的最大值 | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | pic7 = new wxCharts({ | ||
+ | canvasId: 'canvas7', | ||
+ | dataPointShape: false, | ||
+ | type: 'column', | ||
+ | categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'], | ||
+ | series: [{ | ||
+ | name: '成交量1', | ||
+ | data: [15, 20, 45, 37, 4, 80], color: "rgba(0,0,0,0.3)" | ||
+ | |||
+ | |||
+ | }, { | ||
+ | name: '成交量2', | ||
+ | data: [70, 40, 65, 100, 34, 18] | ||
+ | }, { | ||
+ | name: '成交量3', | ||
+ | data: [100, 50, 75, 200, 15, 13] | ||
+ | }], | ||
+ | yAxis: { | ||
+ | format: function (val) { | ||
+ | return val + '万'; | ||
+ | } | ||
+ | }, | ||
+ | xAxis: { | ||
+ | disableGrid: true, | ||
+ | }, | ||
+ | width: windowWidth, | ||
+ | height:200, | ||
+ | dataLabel: true, | ||
+ | extra: { | ||
+ | column: { | ||
+ | width: 40 //柱的宽度 | ||
+ | } | ||
+ | } | ||
+ | });</nowiki> |
2018年8月28日 (二) 14:30的最新版本
wx-charts简介
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个
支持图标类型
饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 雷达图 radar
导入wx-charts
github地址:https://github.com/xiaolin3303/wx-charts.git
直接引入编译好的dist里面的js文件(二选一)
wx-charts的使用
折线图
步骤:
在需要使用的页面的js当中,在顶部写入:
// pages/gragh/test.js var wxCharts = require('wxcharts.js'); var app=getApp(); var daylineChart = null; var yuelineChart = null;
写一个独立的方法(或者直接写在onload里面):
我这里写的方法名是 getMothElectro ,我后面试在onload里面调用了的。
test.js 代码:
// pages/gragh/test.js var wxCharts = require('wxcharts.js'); var app=getApp(); var daylineChart = null; var yuelineChart = null; Page({ /** * 页面的初始数据 */ data: { }, getMothElectro: function () { var windowWidth = 320; try { var res = wx.getSystemInfoSync(); windowWidth = res.windowWidth; } catch (e) { console.error('getSystemInfoSync failed!'); } yuelineChart = new wxCharts({ //当月用电折线图配置 canvasId: 'yueEle', type: 'line', categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], //categories X轴 animation: true, // background: '#f5f5f5', series: [{ name: '总用电量', //data: yuesimulationData.data, data: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 8, 2, 4, 9, 8, 7], format: function (val, name) { return val.toFixed(2) + 'kWh'; } }, { name: '电池供电量', data: [0, 6, 2, 2, 7, 6, 2, 5, 8, 1, 8, 4, 0, 9, 7, 2, 5, 2, 8, 2, 5, 2, 9, 4, 4, 9, 8, 5, 5, 5, 6], format: function (val, name) { return val.toFixed(2) + 'kWh'; } }, { name: '光伏供电量', data: [16, 14, 19, 17, 11, 14, 15, 11, 11, 18, 18, 16, 16, 12, 12, 12, 10, 5, 5, 8, 8, 8, 8, 9, 0, 4, 6, 9, 2, 1, 6], format: function (val, name) { return val.toFixed(2) + 'kWh'; } }, { name: '市电供电量', data: [0, 4, 3, 3, 1, 7, 7, 7, 9, 9, 3, 3, 0, 0, 5, 6, 0, 4, 1, 2, 0, 1, 3, 9, 2, 5, 1, 8, 3, 4, 2], format: function (val, name) { return val.toFixed(2) + 'kWh'; } }], xAxis: { disableGrid: true }, yAxis: { title: '当月用电(kWh)', format: function (val) { return val.toFixed(2); }, max: 20, min: 0 }, width: windowWidth, height: 200, dataLabel: false, dataPointShape: true, extra: { lineStyle: 'curve' } }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getMothElectro(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
test.wxml: (注意这里的canvas-id要与js中的要一致
<canvas class="canvas" canvas-id="yueEle"></canvas> <canvas canvas-id="canvas2"></canvas> <canvas canvas-id="canvas3"></canvas> <canvas canvas-id="canvas4"></canvas> <canvas canvas-id="canvas5"></canvas> <canvas canvas-id="canvas6"></canvas>
test.wxss:
这里的canvas类的高度要与js中定义的一致。
/* pages/gragh/test.wxss */ .canvas { height: 200px; }
写好后,编译一下,效果如图:
饼图
pic2 = new wxCharts({ canvasId: 'canvas2', type: 'pie', series: [{ name: '一班', data: 50 }, { name: '二班', data: 30 }, { name: '三班', data: 20 }, { name: '四班', data: 18 }, { name: '五班', data: 8 }], width: windowWidth, height: 200, dataLabel: true, });
其他图形
pic3 = new wxCharts({ canvasId: 'canvas3', dataPointShape: "circle", type: 'line', extra: { lineStyle: 'curve' //线条的形状(弧形) }, categories: ['2012', '2013', '2014', '2015', '2016', '2017'], series: [{ name: '成交量1', data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//设置某一个值为null会出现断层 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); }, fontColor: "red", titleFontColor: "red", min: 0, gridColor: "red" }, width: windowWidth, height: 200, dataLabel: true }); pic4 = new wxCharts({ canvasId: 'canvas4', 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: windowWidth, height: 200 }); pic5 = new wxCharts({ animation: true, canvasId: 'canvas5', type: 'ring', extra: { ringWidth: 10,//圆环的宽度 pie: { offsetAngle: -45//圆环的角度 } }, title: { name: '70%', color: '#7cb5ec', fontSize: 25 }, subtitle: { name: '收益率', color: '#666666', fontSize: 15 }, series: [{ name: '成交量1', data: 15, stroke: false }, { name: '成交量2', data: 35, stroke: false }, { name: '成交量3', data: 78, stroke: false }, { name: '成交量4', data: 63, stroke: false }], disablePieStroke: true, width: windowWidth, height: 200, dataLabel: true, legend: false, padding: 0 }); pic6 = new wxCharts({ animation: true, canvasId: 'canvas6', type: 'radar', categories: ['1', '2', '3', '4', '5', '6'], series: [{ name: '成交量1', data: [90, 110, 125, 95, 87, 122] }, { name: '成交量2', data: [190, 210, 105, 35, 27, 102] }], width: windowWidth, height: 200, extra: { radar: { max: 200//雷达数值的最大值 } } }); pic7 = new wxCharts({ canvasId: 'canvas7', dataPointShape: false, type: 'column', categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'], series: [{ name: '成交量1', data: [15, 20, 45, 37, 4, 80], color: "rgba(0,0,0,0.3)" }, { name: '成交量2', data: [70, 40, 65, 100, 34, 18] }, { name: '成交量3', data: [100, 50, 75, 200, 15, 13] }], yAxis: { format: function (val) { return val + '万'; } }, xAxis: { disableGrid: true, }, width: windowWidth, height:200, dataLabel: true, extra: { column: { width: 40 //柱的宽度 } } });