|
//获取应用实例
|
var app = getApp();
|
Page({
|
data: {
|
fontSize: 12, // 字体大小, 24rpx=12px
|
count: 10, // 展示的曲线次数
|
width: 0, // 画布宽
|
height: 300, // 画布高, wxss给定canvas高300px
|
dict: [// 所有曲线数据
|
{ cost: 1, transaction: "曲线", balance: 18.665, time: '2016-10-15 13:54:19' },
|
{ cost: 2, transaction: "曲线", balance: 5.7, time: '2016-10-15 13:54:19' },
|
{ cost: 3, transaction: "曲线", balance: 25.612, time: '2016-10-15 13:54:19' },
|
{ cost: 4, transaction: "曲线", balance: 38.258, time: '2016-10-15 13:54:19' },
|
{ cost: 5, transaction: "曲线", balance: 14, time: '2016-10-15 13:54:19' },
|
{ cost: 6, transaction: "曲线", balance: 14, time: '2016-10-15 13:54:19' },
|
{ cost: 7, transaction: "曲线", balance: 14, time: '2016-10-15 13:54:19' },
|
{ cost: 8, transaction: "曲线", balance: 14, time: '2016-10-15 13:54:19' },
|
{ cost: 9, transaction: "曲线", balance: 14, time: '2016-10-15 13:54:19' },
|
{ cost: 10, transaction: "曲线", balance: 0.00001, time: '2016-10-15 13:54:19' },
|
],
|
points: [], // 点的集合（包括点的横坐标x、纵坐标y、当前点的详情detail）
|
costArr: [], // 曲线jq集合
|
balanceArr: [], // ye_jq集合
|
tapDetail: {}, // 每个点对应的详情集合
|
lineLeft: 0, // 详情垂直线的初始左边距
|
gridMarginLeft: 35,// 表格左边距
|
gridMarginTop: 20, // 表格上边距
|
balance: 0, // 当前ye_（ye_卡片上的展示数据）
|
last_time: '',
|
switchBtn: true, // true:ye_ or false:交易额
|
options: {},
|
currentIndex: 0 // 当前点的索引，切换视图的时候保持当前详情
|
},
|
onLoad: function () {
|
var _this = this;
|
wx.getSystemInfo({
|
success: function (res) {
|
// 获取窗口宽, 计算画布宽
|
_this.setData({
|
'width': res.windowWidth
|
});
|
}
|
});
|
_this.sendRequest();
|
},
|
sendRequest() {
|
var _this = this;
|
/** 获取最近曲线数据绘制曲线图**/
|
var data = _this.data.dict;
|
var dict = data;
|
var len = dict.length,
|
xArr = [], // x轴坐标
|
yArr = [], // ye_点在画布中的纵坐标
|
balanceArr = [], // ye_jq集合
|
costArr = [], // 曲线jq集合
|
canvasWidth = _this.data.width,
|
spaceX = (canvasWidth - 2 * _this.data.gridMarginLeft) / (_this.data.count - 1), // 表示横坐标的间隔距离
|
canvasHeight = _this.data.height,
|
gridMarginTop = _this.data.gridMarginTop, // 曲线图上距离
|
gridMarginLeft = _this.data.gridMarginLeft, // 曲线图左距离
|
gridNum = 6, //横线行数
|
fontSize = _this.data.fontSize; //字号
|
// 横坐标&ye_&曲线
|
for (var i = 0; i < len; i++) {
|
xArr.push(i * spaceX);
|
balanceArr.push(parseFloat(dict[i].balance));
|
if (dict[i].transaction == '曲线') {
|
dict[i].cost = -Math.abs(dict[i].cost);
|
}
|
costArr.push(parseFloat(dict[i].cost));
|
}
|
_this.setData({
|
dict: data,
|
tapDetail: dict[dict.length - 1],
|
balance: parseFloat(data[data.length - 1].balance),
|
last_time: data[data.length - 1].time.split(' ')[0],
|
lineLeft: _this.data.width - _this.data.gridMarginLeft - 1,
|
switchArr: balanceArr, // 将纵坐标的值初始化为ye_集合
|
costArr: costArr, // 曲线集合，切换曲线的时候用
|
balanceArr: balanceArr
|
});
|
//canvas
|
var context = wx.createContext();
|
var options = {
|
canvasWidth: canvasWidth, // 矩形宽度
|
canvasHeight: canvasHeight, // 矩形高度
|
gridMarginTop: gridMarginTop, // 曲线图上距离
|
gridMarginLeft: gridMarginLeft, // 曲线图左距离
|
xArr: xArr, // 横坐标
|
gridNum: gridNum, // 横网格线数量
|
context: context, // canvas上下文
|
len: len, // 数据数组长度
|
spaceX: spaceX,
|
fontSize: fontSize
|
};
|
_this.setData({
|
options: options
|
});
|
context.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
/*
|
* 绘制横轴&纵轴&网格线
|
*/
|
_this.drawLineXY(_this.data.options, _this.data.switchArr);
|
|
/*
|
* 描点连线
|
*/
|
_this.drawPointLine(_this.data.options, _this.data.switchArr);
|
|
setTimeout(function () {
|
wx.drawCanvas({
|
canvasId: "firstCanvas",
|
actions: context.getActions(), // 获取绘图动作数组
|
reserve: true,
|
});
|
}, 500);
|
|
},
|
|
// 绘制横轴&纵轴&网格线
|
drawLineXY: function (options, switchArr) {
|
var context = options.context,
|
gridMarginLeft = options.gridMarginLeft,
|
gridMarginTop = options.gridMarginTop,
|
canvasHeight = options.canvasHeight,
|
canvasWidth = options.canvasWidth,
|
xArr = options.xArr,
|
tmp_yArr = switchArr,
|
gridNum = options.gridNum,
|
fontSize = options.fontSize;
|
|
/*
|
* ye_纵坐标&横网格线
|
* gridNum: 横网格线条数
|
* spaceY: 横网格间距
|
* spaceYe: 纵轴ye_的jq间隔
|
* tmp_minY: ye_的最小值
|
* tmp_maxY: ye_的最大值
|
*/
|
var tmp_minY = Math.min.apply(Math, tmp_yArr.map(function (e) { return Math.abs(e); })),
|
tmp_maxY = Math.max.apply(Math, tmp_yArr.map(function (e) { return Math.abs(e); })),
|
spaceYe = tmp_maxY / gridNum,
|
gridHeight = canvasHeight - 2 * gridMarginTop,
|
spaceY = gridHeight / gridNum;
|
|
// 绘制竖网格
|
context.setLineWidth(1);
|
context.setLineCap("round");
|
context.setStrokeStyle("#dddddd");
|
for (var i = 0; i < xArr.length; i++) {
|
context.beginPath();
|
context.moveTo(xArr[i] + gridMarginLeft, canvasHeight - gridMarginTop);
|
context.lineTo(xArr[i] + gridMarginLeft, gridMarginTop);
|
context.stroke();
|
context.closePath();
|
}
|
context.setStrokeStyle("#dddddd");
|
context.setFillStyle("#16b5cb");
|
|
// 绘制横网格&纵轴jq
|
for (var i = 0; i <= gridNum; i++) {
|
var numY = 0,
|
diff = 0;
|
// 纵轴jq
|
if (i === 0) {
|
numY = 0;
|
} else {
|
numY = (spaceYe * i).toFixed(0);
|
}
|
context.beginPath();
|
context.moveTo(xArr[0] + gridMarginLeft, gridMarginTop + spaceY * i);
|
context.lineTo(xArr[xArr.length - 1] + gridMarginLeft, gridMarginTop + spaceY * i);
|
context.stroke();
|
context.closePath();
|
|
context.beginPath();
|
context.setFontSize(fontSize);
|
var left = 25;
|
if (numY < 10) {
|
left = 15;
|
} else if (numY < 100) {
|
left = 20;
|
} else if (numY < 1000) {
|
left = 25;
|
}
|
context.fillText(numY, gridMarginLeft - left, canvasHeight - gridMarginTop - spaceY * i + 3);
|
context.closePath();
|
}
|
|
/*
|
* 绘制横轴和纵轴
|
*/
|
context.setLineWidth(2);
|
context.setStrokeStyle("#16b5cb");
|
context.beginPath();
|
context.moveTo(xArr[0] + gridMarginLeft, canvasHeight - gridMarginTop);
|
context.lineTo(canvasWidth - gridMarginLeft / 2, canvasHeight - gridMarginTop);
|
context.moveTo(xArr[0] + gridMarginLeft, canvasHeight - gridMarginTop);
|
context.lineTo(xArr[0] + gridMarginLeft, 0);
|
context.stroke();
|
context.closePath();
|
|
},
|
|
// 描点&连线
|
drawPointLine: function (options, switchArr) {
|
var _this = this;
|
var context = options.context,
|
yArr = [],
|
gridMarginLeft = options.gridMarginLeft,
|
gridMarginTop = options.gridMarginTop,
|
canvasHeight = options.canvasHeight,
|
canvasWidth = options.canvasWidth,
|
xArr = options.xArr,
|
gridNum = options.gridNum,
|
tmp_yArr = switchArr,
|
len = options.len,
|
spaceX = options.spaceX,
|
pointArr = [];
|
|
/*
|
* 点集的纵坐标
|
* 根据网格间距/ye_间距的比例算出点的对应纵坐标
|
* spaceY: 横网格间距
|
* spaceYe: 纵轴jq间隔
|
* tmp_minY: jq的最小值
|
* tmp_maxY: jq的最大值
|
* yArr: 点在画布中的纵坐标
|
*/
|
|
var tmp_minY = Math.min.apply(Math, tmp_yArr.map(function (e) { return Math.abs(e); })),
|
tmp_maxY = Math.max.apply(Math, tmp_yArr.map(function (e) { return Math.abs(e); })),
|
spaceYe = tmp_maxY / gridNum,
|
gridHeight = canvasHeight - 2 * gridMarginTop,
|
spaceY = gridHeight / gridNum,
|
switchBtn = Math.min.apply(Math, tmp_yArr) >= 0;
|
|
for (var i = 0; i < len; i++) {
|
yArr.push(gridHeight - (tmp_maxY - Math.abs(tmp_yArr[i])) * spaceY / spaceYe);
|
}
|
|
/*
|
* 描点连线
|
*/
|
for (var i = 0; i < len; i++) {
|
var x = xArr[i] + gridMarginLeft, // 横坐标
|
y = canvasHeight - gridMarginTop - yArr[i]; // 纵坐标
|
|
// 将点在画布中的坐标&曲线详情存入数组
|
pointArr.push({
|
x: x,
|
y: y,
|
detail: this.data.dict[i]
|
});
|
}
|
|
context.setStrokeStyle("#73b4ef");
|
context.setFillStyle("#16b5cb");
|
// 描点连线
|
for (var i = 0, pLen = pointArr.length; i < pLen; i++) {
|
|
if (pointArr[i + 1]) {
|
if ((switchBtn && tmp_yArr[i + 1] > tmp_yArr[i]) || (!switchBtn && (tmp_yArr[i] > 0 || tmp_yArr[i + 1] > 0))) {
|
context.setGlobalAlpha(0.66);
|
}
|
context.beginPath();
|
context.moveTo(pointArr[i].x, pointArr[i].y);
|
context.lineTo(pointArr[i + 1].x, pointArr[i + 1].y);
|
context.stroke();
|
context.beginPath();
|
}
|
|
context.setGlobalAlpha(1);
|
context.beginPath();
|
context.arc(pointArr[i].x, pointArr[i].y, 2, 0, 2 * Math.PI); // 画点
|
context.fill();
|
context.fillText((!switchBtn && tmp_yArr[i] > 0 ? '+' : '') + tmp_yArr[i], pointArr[i].x + 3, pointArr[i].y - 3); // 点的含义，画字
|
context.closePath();
|
|
pointArr[i].detail.balance = parseFloat(pointArr[i].detail.balance);
|
}
|
|
_this.setData({
|
points: pointArr
|
});
|
},
|
|
// 触摸详情
|
canvasTap: function (e) {
|
var _this = this;
|
// 手指在画布中的坐标
|
var tapX = e.detail.x,
|
tapY = e.detail.y,
|
points = _this.data.points,
|
pointsLen = points.length,
|
diffX = 0,
|
iwidth = (_this.data.width - 2 * _this.data.gridMarginLeft) / (_this.data.count - 1);
|
|
var i = Math.round((tapX - _this.data.gridMarginLeft) / iwidth);
|
|
_this.setData({
|
tapDetail: points[i].detail,
|
lineLeft: _this.data.gridMarginLeft + iwidth * i - 1, // 详情竖线的left
|
currentIndex: i // 当前点的索引，即显示当前详情
|
});
|
},
|
|
// 切换视图
|
switchBtn: function (e) {
|
var id = e.target.id;
|
if (!id || (id == 'balance' && this.data.switchBtn) || (id == 'cost' && !this.data.switchBtn)) {
|
return false;
|
}
|
var context = this.data.options.context;
|
context.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
|
this.drawLineXY(this.data.options, this.data[id + 'Arr']);
|
this.drawPointLine(this.data.options, this.data[id + 'Arr']);
|
|
wx.drawCanvas({
|
canvasId: "firstCanvas",
|
actions: context.getActions(),
|
reverse: true
|
});
|
this.setData({
|
switchBtn: !this.data.switchBtn
|
});
|
}
|
|
});
|
