原生js开发仿ECharts的canvas柱图实例教程

canvas 画布是HTML5中新增的标签，可以通过使用js操作 canvas 绘图 API在网页中绘制图像。

百度开发了一个开源的可视化图表库ECharts，功能非常强大，可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。很多项目都有使用过ECharts开发过图表功能。

本实例教程使用原生js教你开发一个仿ECharts的柱状图。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。

按照ECharts的开发方法，图表都是生成在一个HTML元素中。所以本实例中也先准备一个id名为canvasWrap的div元素，如下所示：

<div class="canvas_wrap" id="canvasWrap"></div>

然后在canvasWrap元素中创建canvas元素，再在canvas元素上绘制柱状图。开发之前，按照惯例，还是先分析柱状图的具体操作，再根据具体操作把实现功能的方法分成多个步骤，接下来一个步骤一个步骤去完成它。

1. 编写柱状图数据
2. 获取canvasWrap元素及宽高
3. 创建绘图环境
   3.1 创建canvas画布
   3.2 设置canvas画布的宽度和高度
   3.3 将canvas画布放入到canvasWrap元素中
   3.4 创建绘图上下文环境
4. 设定坐标区域
5. 绘制x轴
   5.1 绘制轴线
   5.2 绘制刻度线
   5.3 绘制刻度名称
6. 绘制y轴
   6.1 绘制轴线
   6.2 绘制刻度线
   6.3 绘制刻度值
   6.4 绘制x轴网格线
7. 绘制柱图
   7.1 计算柱图宽度
   7.2 计算柱图高度
   7.3 计算柱图X起点
   7.4 计算柱图Y起点
   7.5 绘制柱图

具体代码如下：

//1 编写柱状图数据
option = {
   
   
  //x轴数据
  xAxis: {
   
   
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  //柱图数据
  series: [{
   
   
    //多写几组数据，用于查看不同数据时的图表效果
    // data: [0.01, 0.2, 0.05, 0.07, 0.04, 0.13, 0.9],
    // data: [1, 1, 5, 7, 4, 1, 9],
    // data: [1213, 30, 150, 80, 70, 910, 630],
    data: [120, 199, 150, 180, 70, 110, 130],
    //图形样式：柱图
    type: 'bar'
  }]
};

//创建图表函数，wrap：图表父元素id；data：图表数据
function fnCharts(wrap,data){
   
   
  //2.获取canvasWrap元素
  var eWrap = document.getElementById(wrap);
  //2.获取canvasWrap元素宽度和高度，用于设置canvas画布大小
  var nWrapW = eWrap.offsetWidth;
  var nWrapH = eWrap.offsetHeight;

  //3.1 创建canvas画布
  var eCanvas = document.createElement('canvas');
  //3.2 设置canvas画布的宽度和高度
  eCanvas.width = nWrapW;
  eCanvas.height = nWrapH;
  //3.3 将canvas画布放入到canvasWrap元素中
  eWrap.appendChild(eCanvas);
  //3.4 创建绘图上下文环境(才能够在Canvas画