小程序wx-charts的项目实用

大家好，

我是小九最近公司的一个小程序项目要用到统计类折线图

于是准备用wx-charts来做这个趋势图首先从gethub上或者从码云上下载wx-charts.js,传送门:https://gitee.com/Q_Augly/wx-charts.git打开git地址后我们可以看到wx-charts的一些介绍。wx-charts是基于canvas用js写的。

支持的图表类型有：

饼图 pie

圆环图 ring

线图 line

柱状图 column

区域图 area

雷达图 radar

我们先来看一下例子

参数说明

参数说明-wxCharts文档：https://github.com/xiaolin3303/wx-charts/issues/56

方法&事件

方法&事件:https://github.com/xiaolin3303/wx-charts/issues/57

具体实现

本文以我自己的项目作为实例,给大家讲解一下

1.引入wxChart.js在项目中，我直接引用的wxChart.js

2.创建画布打开趋势图的html文件

血压记录

趋势图

上一周

{}

下一周

平均血压值

{}/{}

mmHg

平均心率值

{}

次/分钟

wxss:

/* pages/index/lookrecord/lookrecord.wxss */

page{

background-color:rgba(239,239,240,1);

}

.head_item{

width:374rpx;

text-align:center;

font-size:34rpx;

color:#999;

letter-spacing:;

}

.head_itemActive{

color:rgba(87,213,200,1);

}

.line{

width:2rpx;

height:100%;

background-color:rgba(204,204,204,1);

}

.head{

width:100%;

height:100rpx;

background-color:rgba(255,255,255,1);

border-bottom:1rpxsolidrgba(204,204,204,1);

display:flex;

align-items:center;

justify-content:space-between;

position:fixed;

top:;

z-index:10;

}

.mymain{

position:absolute;

width:100%;

height:100%;

display:block;

box-sizing:border-box;

padding-top:100rpx;

top:;

}

.xyjl{

width:100%;

height:100%;

box-sizing:border-box;

padding:rpx30rpx;

}

.item_title{

width:100%;

height:91rpx;

line-height:90rpx;

font-size:26rpx;

color:#999;

letter-spacing:;

}

.item_main{

border-radius:30rpx;

background-color:rgba(255,255,255,1);

width:100%;

height:auto;

box-sizing:border-box;

padding:rpx40rpx;

}

.icon-jiantouyou,.icon-icon_arrow_top,.icon-jiantouxia,

.icon-iconfontzhizuobiaozhun023126{

font-size:30rpx;

color:rgba(199,199,204,1);

}

.main_title{

width:100%;

height:250rpx;

box-sizing:border-box;

padding:30rpxrpx;

display:flex;

align-items:center;

justify-content:space-between;

}

.main_item{

width:100%;

height:200rpx;

box-sizing:border-box;

padding:30rpxrpx;

display:flex;

align-items:center;

justify-content:space-between;

border-top:1rpxsolidrgba(216,216,216,1);

}

.title_kind{

width:150rpx;

height:100%;

display:flex;

flex-direction:column;

justify-content:space-between;

align-items:center;

}

.kind_title{

font-size:26rpx;

color:#333;

text-align:center;

line-height:30rpx;

}

.kind_number{

font-size:34rpx;

color:#d63030;

letter-spacing:;

line-height:45rpx;

}

.kind_numberSussece{

color:rgba(99,218,121,1);

}

.kind_dw{

font-size:26rpx;

color:#333;

line-height:45rpx;

}

.kind_result{

display:inline-block;

height:45rpx;

padding:rpx20rpx;

border:2rpxsolid#e68a8a;

border-radius:100rpx;

font-size:26rpx;

color:#d73737;

line-height:40rpx;

}

.kind_resultSuccess{

border:2rpxsolidrgba(99,218,121,1);

color:rgba(99,218,121,1);

}

.qs{

width:100%;

height:100%;

box-sizing:border-box;

padding-top:80rpx;

}

.container{

width:690rpx;

border-radius:30rpx;

background-color:rgba(255,255,255,1);

height:950rpx;

display:flex;

flex-direction:column;

box-sizing:border-box;

font-size:35rpx;

color:#333;

margin:auto;

}

.container_head{

width:640rpx;

margin:auto;

height:auto;

}

.container_head_top{

width:100%;

height:100rpx;

border-bottom:1rpxsolidrgba(216,216,216,1);

display:flex;

align-items:center;

justify-content:space-between;

}

.canvas{

width:100%;

height:550rpx;

margin-top:30rpx;

}

.prev,.next{

width:130rpx;

border-radius:100rpx;

display:flex;

justify-content:space-between;

font-size:24rpx;

align-items:center;

color:#fff;

box-sizing:border-box;

padding:3rpx15rpxrpx15rpx;

line-height:50rpx;

background-color:rgba(87,213,200,1);

}

.prevtext{

display:block;

}

.nexttext{

display:block;

}

.iconfont{

font-size:20rpx;

color:#fff;

}

.top_title{

font-size:26rpx;

color:#333;

}

.container_head_main{

width:100%;

height:170rpx;

display:flex;

align-items:center;

justify-content:space-between;

border-bottom:1rpxsolidrgba(216,216,216,1);

}

.container_head_mainview{

width:50%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.main_Ttitle{

font-size:26rpx;

color:#333;

text-align:center;

line-height:50rpx;

}

.main_main{

font-size:34rpx;

color:#333;

text-align:center;

font-weight:bold;

line-height:40rpx;

}

.main_mintitle{

font-size:26rpx;

color:#333;

text-align:center;

line-height:50rpx;

}

3.开始写jsjs文件

// pages/index/lookrecord/lookrecord.js

varwxCharts=require('../../../utils/wxcharts.js');//引入wxChart文件

varapp=getApp();

constconfig=require('../../../utils/config.js')

varlineChart=null;

varyMo=[],

diastolic_pressureData=[],

heart_rateData=[],

systolic_pressureData=[];

Page({

/**

* 页面的初始数据

*/

data:{

},

torecord(){

// wx.navigateTo({

// url: '../lookrecord/lookrecord',

// })

wx.navigateBack({

delta:1,

})

},

touchHandler:function(e){

lineChart.showToolTip(e,{

// background: '#7cb5ec',

format:function(item,category){

returncategory+' '+item.name+':'+item.data

}

});

},

getData:function(enddate,page){

wx.showLoading({

title:'加载中...',

mask:true,

})

yMo=[];

diastolic_pressureData=[];

heart_rateData=[];

systolic_pressureData=[];

if(enddate==''){

varparams={

token:app.globalData.token,

page:page

}

}else{

varparams={

token:app.globalData.token,

needdate:enddate,

page:page

}

}

varthat=this

config.ajax('POST',params,config.curveData,(res)=>{

console.log(res)

this.setData({

})

}

wx.hideLoading()

that.wxChartData()

},(res)=>{

})

},

next(){

this.getData(yMo[yMo.length-1],1)

},

prev(){

this.getData(yMo[],-1)

},

wxChartData(){

varwindowWidth='',windowHeight='';//定义宽高

try{

varres=wx.getSystemInfoSync();//试图获取屏幕宽高数据

windowWidth=res.windowWidth/750*690;//以设计图750为主进行比例算换

windowHeight=res.windowWidth/750*550//以设计图750为主进行比例算换

}catch(e){

console.error('getSystemInfoSync failed!');//如果获取失败

}

console.log(yMo)

lineChart=newwxCharts({//定义一个wxCharts图表实例

canvasId:'lineCanvas',//输入wxml中canvas的id

type:'line',//图标展示的类型有:'line','pie','column','area','ring','radar'

categories:yMo,//模拟的x轴横坐标参数

animation:true,//是否开启动画

series:[{//具体坐标数据

name:'收缩压',//名字

data:systolic_pressureData,//数据点

format:function(val,name){//点击显示的数据注释

returnval+'mmHg';

}

},{

name:'舒张压',

data:diastolic_pressureData,

format:function(val,name){

returnval+'mmHg';

}

},{

name:'心率',

data:heart_rateData,

format:function(val,name){

returnval+'次/分钟';

}

}

],

xAxis:{//是否隐藏x轴分割线

disableGrid:true,

},

yAxis:{//y轴数据

title:'数值',//标题

format:function(val){//返回数值

returnval.toFixed(2);

},

min:30,//最小值

max:180,//最大值

gridColor:'#D8D8D8',

},

width:windowWidth,//图表展示内容宽度

height:windowHeight,//图表展示内容高度

dataLabel:false,//是否在图表上直接显示数据

dataPointShape:true,//是否在图标上显示数据点标志

extra:{

lineStyle:'curve'//曲线

},

});

},

/**

* 生命周期函数--监听页面加载

*/

onLoad:function(e){

this.getData('',-1)

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady:function(){

},

/**

* 生命周期函数--监听页面显示

*/

onShow:function(){

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide:function(){

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload:function(){

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh:function(){

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom:function(){

},

/**

*/

onShareAppMessage:function(){

},

})

4.调制实际项目当中可能我们的线条的颜色和数据点的形状可能跟默认的不一样怎么办呢？没关系，我们打开wxCharts.js

varconfig={

yAxisWidth:15,

yAxisSplit:5,

xAxisHeight:15,

xAxisLineHeight:15,

legendHeight:15,

yAxisTitleWidth:15,

padding:12,

columePadding:3,

fontSize:10,

// dataPointShape: ['diamond', 'circle', 'triangle', 'rect'],

dataPointShape:['circle'],

// colors: ['#7cb5ec', '#f7a35c', '#434348', '#90ed7d', '#f15c80', '#8085e9'],

colors:['#6EB9FF','#ECB97D','#51DBA2'],

pieChartLinePadding:25,

pieChartTextPadding:15,

xAxisTextPadding:3,

titleColor:'#333333',

titleFontSize:20,

subtitleColor:'#999999',

subtitleFontSize:15,

toolTipPadding:3,

toolTipBackground:'#000000',

toolTipOpacity:0.7,

toolTipLineHeight:14,

radarGridCount:3,

radarLabelTextMargin:15

};

以上是我使用wxCharts的项目经验，感谢wxChatrs开发人员，请大家多多指教