console
var num = [200, 600, 400, 700, 250, 500, 190, 200, 300,200];
var week = ['4-11', '4-12', '4-13', '4-14', '4-15', '4-16', '4-17', '4-18', '4-19', '4-20', '4-21'];
var canv = document.getElementById("can");
var ctx = canv.getContext("2d");
var col = ["red", "blue", "green"]
var j = 0,
j1 = 0,
j2 = 0,
jiao = 0;
var sun = 0;
var xnum = 1000 / 10;
var ynum = 300 / 10;
for (var i = 0; i < num.length; i++) {
sun = sun + num[i];
//alert(sun)
ctx.font = "22px Arial"
}
for (var i = 1; i <= 10; i++) {
//ctx.lineWidth=0.5;
ctx.beginPath();
ctx.strokeStyle = "#88c0f2";
ctx.fillStyle = "#188618";
ctx.moveTo(50, i * 35 + 50)
ctx.lineTo(canv.width - 60, i * 35 + 50)
//alert(i*35+50)
ctx.stroke();
ctx.fillText(1000 - i * xnum, 20, i * 35 + 50);
//ctx.fillText(100-i*ynum,canv.width-50,i*35+50);
ctx.fill();
}
for (var i = 1; i <= 10; i++) {
//ctx.lineWidth=0.5;
ctx.beginPath();
ctx.strokeStyle = "#88c0f2";
ctx.moveTo(i * 100, 50)
ctx.stroke();
ctx.fillStyle = "#000";
ctx.fillText(week[i - 1], i * 100 - 10, canv.height - 80);
ctx.fill();
}
for (var i = 0; i < 10; i++) {
ctx.beginPath();
ctx.strokeStyle = "#188618";
ctx.fillStyle = "#188618";
if (i == 0) {
ctx.moveTo(100, 400 - num[i] / 100 * 35)
} else {
ctx.moveTo(i * 100, 400 - num[i - 1] / 100 * 35)
}
ctx.lineTo(100 + i * 100, 400 - num[i] / 100 * 35)
ctx.fillText(num[i], 100 + i * 100, 400 - num[i] / 100 * 35);
ctx.stroke();
}
for (var i = 0; i < 10; i++) {
ctx.beginPath();
ctx.strokeStyle = "#e04b39";
ctx.fillStyle = "#e04b39";
if (i == 0) {
ctx.moveTo(100, 400 - num1[i] / 30 * 35)
} else {
ctx.moveTo(i * 100, 400 - num1[i - 1] / 30 * 35)
}
ctx.lineTo(100 + i * 100, 400 - num1[i] / 30 * 35)
ctx.fillText(num1[i], 100 + i * 100, 400 - num1[i] / 30 * 35);
ctx.stroke();
}
<div class="canvas">
<canvas id="can" width="1800" height="500"></canvas>
<p>说明:渠道统计是帮助商户统计商户在查询的时间段,渠道用户的总和</p>
</div>