1.把wxcharts.js拷贝进项目,放好位置,我一般放在utils下面(js百度可以自己搜下载)
2.从后台获取数据(括号自己部全)
页面引入这句即可
<
canvas
canvas-id=
"columnCanvas"
class=
"canvas"
bindtouchstart=
"touchHandler"></
canvas
>
var wxCharts = require('../../utils/wxcharts.js'); //根据自己放的位置写路径
var app = getApp();
var columnChart = null;
Page({
data: {
chartData:{}
},
onLoad: function () {
var that=this;
//获取步数数据并存储
wx.request({
url: 'https://你的地址/gethistoryStep',
data: { token:'根据自己情况传值'},
success: function (res) {
that.setData({
chartData:res.data //给data中赋值
});
that.landchart(); //加载插件,是写的一个加载插件的方法
},
fail: function () {
}
})
写好的加载插件的方法
landchart: function (e) {
var windowWidth = 420; //宽度
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth; //获取的屏幕宽度,自适应
} catch (e) {
console.error('getSystemInfoSync failed!');
}
columnChart = new wxCharts({
canvasId: 'columnCanvas', //在wxml中调用的id
type: 'column', //定义是什么类型的图,这个为柱状图
animation: true,
categories: this.data.chartData.main.categories, //调取data中的数据(x轴的),y轴是自适应
series: [{
name: '',
data: this.data.chartData.main.data, //调取data的数据,柱状图的数据
format: function (val, name) {
return val.toFixed(0);
}
}],
yAxis: {
format: function (val) {
return val ;
},
title: '',
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration'
},
extra: {
column: {
width: 25 //设置柱状图中,单个柱子的宽度
}
},
width: windowWidth, //上面的总宽度
height: 300, //设置柱状图的总高度
});
}
后台 我的类用的@RestController,所以返回会自动为json
@ApiOperation(value = "历史记录,个人近七日运动数据列表")
@ApiImplicitParam(name = "token", value = "用户token", required = true, dataType = "String")
@RequestMapping(value = "/gethistoryStep")
public Map gethistory(String token) throws Exception{
List<TMemberBase> user = us.findAllByToken(token);
int uid = user.get(0).getMemberId();
String[] cc = DateKit.getmanyDay(7); //获取最近七天的时间,并显示成 MM-dd,DateKit是我自己写的处理时间的工具类,就不传了
List<TWalk> all = ms.findAllByMemberIdAndRecordTimeAfter(uid, DateKit.parseDateTime(DateKit.getYearForDate(null)+"-"+ cc[0] + " 00:00:00"));
//用的jpa,所以懂的话,看名字也知道,上面查询语句的意思
int size = all.size();
int aa[] = new int[7];
//判断时间,当最近的运动和近七日的时间相同时,将步数存放到相应的位置
for (int j = 0; j < 7; j++) {
for (int i = 0; i < size; i++) {
if(all.get(i).getRecordDate().substring(5).equals(cc[j])) {
aa[j] = all.get(i).getStepNum();
break;
}else{
aa[j] = 0;
}
}
} //要注意的就是这块,因为插件的数据有它调用的格式,所以返回前台的格式要正确
Map map =new HashMap();
Map map1 =new HashMap();
map.put("main",map1);
map1.put("title","步数图表");
map1.put("data",aa);
map1.put("categories",cc);
return map;
}
数据格式,这样就明白为什么要那样写map了
注:这里面可能会遇到一个调整宽高,并不能按自己想法来的情况
这时候,你可以在 wxss中加入 样式
.canvas{
margin-top:
10px;
width:
100%;
height:
270px; //这个,我是为了不显示下面方块,所以减了30px
}
完成收工