FORK ME

console 命令行工具 X clear

                    
>
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>