-
店铺开通
销客多小程序商城,可快速开通上架店铺
-
拉新推广
链接12亿微信流量,拉新工具沉淀意向客户
-
复购裂变
拼团、分销等提升转化,不断裂变新用户购买
-
对接门店
线上导流、促活门店,实现线上下同步发展
销客多小程序商城,可快速开通上架店铺
链接12亿微信流量,拉新工具沉淀意向客户
拼团、分销等提升转化,不断裂变新用户购买
线上导流、促活门店,实现线上下同步发展
2020-09-27 作者:黄先生
这里是微信小程序项目中用到的canvas绘制柱状图、线图、饼状图,跟html里的canvas略微差别,不做详细介绍,
1、线图
function draw(data, ctx) {
var width, height = 300, ratioX, ratioY, maxY, stepY;
var newArr = new Array();
//-------- 数据处理 -----------
if (data.time == null) {
return;
}
if (data.type == 'day' || data.type == 'month') {
var timeList = new Array();
for (var i = 0; i < data.time.length; i++) {
if ((i % 4 == 0 && data.type == 'day') || (i % 5 == 0 && data.type == 'month')) {
timeList.push(data.time[i].substr(data.time[i].length - 5, 5));
}
}
data.time = timeList;
} else {
for (var i = 0; i < data.time.length; i++) {
data.time[i] = data.time[i].substr(data.time[i].length - 5, 5);
}
}//这里是后台返回的数据,处理后展示在页面
// ---------- 获取屏宽 ---------------
wx.getSystemInfo({
success: function (res) {
width = res.windowWidth;
}
})
ratioX = parseInt((width - 60) / (data.time.length - 1));
ratioY = parseInt((height - 45) / 6);
//求value的最大值
for (var i = 0; i < data.list.length; i++) {
newArr.push(Math.max.apply(Math, data.list[i].value));
}
maxY = Math.max.apply(Math, newArr);
stepY = Math.ceil(maxY / 4);
// ------- 绘制坐标线 ------
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.save();
ctx.setStrokeStyle("#dde2e3");
ctx.setFillStyle("#848198");
ctx.setFontSize('8');
ctx.fillText(i * stepY, 0, 220 - i * ratioY);
ctx.moveTo(22, 215 - i * ratioY);
ctx.lineTo((width - 30), 215 - i * ratioY);
ctx.stroke();
ctx.restore();
}
//--------- 绘制图例 ------------
for (var i = 0; i < data.list.length; i++) {
ctx.save();
ctx.translate(15, 215);
ctx.beginPath();
ctx.setStrokeStyle(color[i]);
ctx.setLineCap("round");
ctx.setLineWidth(10);
ctx.moveTo(22 + i * 38, 46);
ctx.lineTo(38 + i * 38, 46);
ctx.stroke();
ctx.setFontSize('8');
ctx.setFillStyle("#000000");
ctx.fillText(data.list[i].title, 21 + i * 38, 66);
ctx.restore();
}
// ------ 绘制横坐标 ------
for (var i = 0; i < data.time.length; i++) {
ctx.save();
ctx.translate(15, 215);
ctx.setFontSize('8');
ctx.setFillStyle('#848198');
ctx.fillText(data.time[i], i * (ratioX), 20);
ctx.restore();
}
//------ 绘制折线 ---------
for (var i = 0; i < data.list.length; i++) {
ctx.beginPath();
ctx.save();
ctx.translate(22, 215);
ctx.setStrokeStyle(color[i]);
ctx.moveTo(0, -data.list[i].value[0] / (stepY / ratioY));
//console.log(data.list[i].value);
for (var j = 0; j < data.list[i].value.length; j++) {
ctx.lineTo(j * (parseFloat((width - 53) / (data.list[i].value.length - 1))), -(data.list[i].value[j] / (stepY / ratioY)));
ctx.stroke();
}
ctx.restore();
}
ctx.draw();
}
2、饼图
function draw(data, ctx) {
var start = 0,x,y = 140,r = 90,total=0, end,width;
var ratio = new Array();
wx.getSystemInfo({
success: function (res) {
width = res.windowWidth;
}
});
x = width / 2 - 15;
for(var i=0;i<data.length;i++){
total += data[i].num;
}
for (var i = 0; i < data.length; i++) {
ratio.push(data[i].num / total);
}
// -------- 绘制饼图 --------------------
for (var i = 0; i < data.length; i++) {
end = start + Math.PI * 2 * ratio[i];
ctx.save();
ctx.translate(x, y);
ctx.setFontSize("8");
ctx.setFillStyle(color[i]);
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
ctx.fillText(data[i].name + ' ' + (ratio[i] * 100).toFixed(2) + '%', Math.cos((end+start)/2)* 120, Math.sin((end+start)/2)* 120);
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.setFillStyle(color[i]);
ctx.moveTo(x, y);
ctx.arc(x, y, r, start, end, false);
ctx.fill();
ctx.restore();
start = end;
}
// -------- 饼心 ---------------
ctx.save();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, 50, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.restore();
ctx.draw();
}
3、柱状图
function draw(data, ctx) {
var width,height = 260;
var newArr = new Array();
wx.getSystemInfo({
success: function (res) {
width = res.windowWidth;
}
})
var ratioX = (width - 55) / data.length;
var ratioY = parseInt((height - 45) / 5);
//求NUM的最大值
for (var i = 0; i < data.length; i++) {
newArr.push(data[i].num);
}
var maxY = Math.max.apply(Math, newArr);
var stepY = Math.ceil(maxY / 4);
// ------- 绘制坐标线 ------
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.save();
ctx.setStrokeStyle("#dde2e3");
ctx.setFillStyle("#848198");
ctx.setFontSize('8');
ctx.moveTo(15, 215 - i * ratioY);
ctx.lineTo(380, 215 - i * ratioY);
ctx.fillText(i * stepY, 0, 220 - i * ratioY);
ctx.stroke();
ctx.restore();
}
推荐文章
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() ) 获取当前的页面栈,决定需要返回几层。 OBJECT 参数说明:...
小程序的能力需要微信客户端来支撑,每一个基础库都只能在对应的客户端版本上运行,高版本的基础库无法兼容低版本的微...
根据2017年微信小程序最新开发,新开发出了一个非常有远见的功能,就是小程序弹幕功能,通过此功能可以实现实时发送弹...
wx.saveFile(OBJECT) 保存文件到本地。 OBJECT参数说明: 参数 类型 必填 说明 tempFilePath String 是 需要保存的文件的临时路径 succe...
天店收银系统有星耀、星云、标准三个版本,每套系统版本的价格都有所不同,价格从800元起,下面小编就为大家从适用业态...
收银系统小程序的开通流程 1. 选择合适的收银软件 目前市场上有多种收银软件提供小程序店铺功能。例如,店益就是一款能...
在互联网高速发展的今天,线上线下一体化的商业模式已成为主流。特别是对于零售行业而言,将收银系统与微信公众号对接...
收银系统对接微信小程序的流程 准备工作:首先,商家需要准备好收银系统和小程序的开发环境。对于收银系统,可以使用...
直接说答案:目前是不能直接推送自己的小程序的。 不过也不是说没有办法,可以通过视频号小店,然后跳转到自己的微信...
第一:线上线下收银系统 线上线下收银系统是一种结合了实体店铺与在线销售渠道的技术解决方案。这种系统不仅提高了收...