JS uses canvas technology to imitate echarts bar chart

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

//1 Write bar chart data option = {
  //x-axis data xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  //Column chart data series: [{
    //Write a few more sets of data to view the chart effects of different data// 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],
    //Graphic style: bar chart type: 'bar'
  }]
};

//Create chart function, wrap: chart parent element id; data: chart data function fnCharts(wrap,data){
  //2. Get the canvasWrap element var eWrap = document.getElementById(wrap);
  //2. Get the width and height of the canvasWrap element to set the canvas size var nWrapW = eWrap.offsetWidth;
  var nWrapH = eWrap.offsetHeight;

  //3.1 Create canvas var eCanvas = document.createElement('canvas');
  //3.2 Set the width and height of the canvas eCanvas.width = nWrapW;
  eCanvas.height = nWrapH;
  //3.3 Put the canvas into the canvasWrap element eWrap.appendChild(eCanvas);
  //3.4 Create a drawing context (to be able to draw on the Canvas canvas)
  var oCtx = eCanvas.getContext('2d');

  //4. Set the upper left and lower right corners of the coordinate area //The starting point is set to 50.5, not an integer, to make the line clear var nZoneStartX = 50.5;
  var nZoneStartY = 50.5;
  var nZoneEndX = nWrapW - nZoneStartX;
  var nZoneEndY = nWrapH - nZoneStartY;

  //5.1 Use the line function to draw the x-axis fnCreatLine(nZoneStartX,nZoneEndY,nZoneEndX,nZoneEndY);
  //Calculate the x-axis length var nLonX = nZoneEndX - nZoneStartX;
  //Get the length of the x-axis data array var nDataLon = option.xAxis.data.length;
  //Loop according to the length of the x-axis data array, and draw the scale lines and scale value names in the loop for(let i=0;i<nDataLon;i++){
    //Calculate the value of the starting point of the x-axis scale line on the x-axis let nScaleX = nZoneStartX+Math.floor(nLonX*(i/nDataLon));
    //The starting points of the scale lines are all on the x-axis let nScaleY = nZoneEndY;
    //5.2 Draw a scale line with a length of 10
    fnCreateLine(nScaleX,nScaleY,nScaleX,nScaleY+10);
    //Get the scale name string from the data let sName = option.xAxis.data[i];
    //Calculate the starting point of the scale name let nNameX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))+Math.floor(nLonX*(1/nDataLon))/2;
    let nNameY = nZoneEndY+15;
    //5.3 Draw the scale name fnCreatText(sName,nNameX,nNameY,'#aaa','center');
  }

  //6.1 Use the line function to draw the y-axis line fnCreatLine(nZoneStartX,nZoneEndY,nZoneStartX,nZoneStartY);
  //Before drawing the y-axis tick marks, you need the maximum and minimum values ​​of the tick marks, the number of tick line segments, and the interval between the tick marks.
  // Maximum scale value First take the maximum value from the array, then calculate the maximum value that should be displayed var nMaxScal = Math.max.apply(null,option.series[0].data);
  //The minimum scale value is 0 in this example
  var nMinScal = 0;
  //The number of scale segments is set to 4 in this example
  var nSplit = 4;
  //Calculate the scale interval value var nStep = (nMaxScal-nMinScal)/nSplit;
  //At this point you may find that the scale interval seems a bit strange, because the scale interval of a general chart is a multiple of 5.
  //For example: [0,0.5,1.0,1.5,2] or [0,50,100,150,200].
  //So further calculation is needed to see if nStep is a multiple of 5. If not, nIncrease is incremented to the nearest multiple of 5.
  //Calculate the first step. According to nStep, the multiple value should be 0.5 or 5 or 50 or...
  //In this example, the nStep value is converted into a string before processing (logarithms and exponentials can also be used for calculation).
  var sTemp = '' + nStep; //Convert nStep to a string //Declare a number that needs to be incremented, the default is 1
  var nIncrease = 1;
  //Declare a variable to solve the precision bug caused by decimal multiplication
  var nTempMultiple = 1;  

  //nIncrease takes 10 to the power of n and calculates through the following judgment if(sTemp.indexOf('.')==-1){
    //If nStep does not contain a decimal point, nIncrease is 10 raised to the power of sTemp.length-2.
    //For example, if nStep is 19, nIncrease = 10 to the power of 0, and the increment is 1
    //If nStep is 9, nIncrease = 10 to the power of -1, and the increment is 0.1
    //If nStep is 199, nIncrease = 10 to the power of 1, the increment is 10
    nIncrease = Math.pow(10,sTemp.length-2);
  }else{
    //If nStep contains a decimal point, nIncrease is 10 raised to the power of sTemp - 2.
    nIncrease = Math.pow(10,sTemp.indexOf('.')-2);
    //This variable is used to solve the precision bug that may occur when multiplying decimals, such as when nIncrease is a decimal nTempMultiple = Math.pow(10,sTemp.indexOf('.')); 
  }
  //Round multiples to facilitate increment, such as 165 to 160, 16.5 to 16, 1.65 to 1.6, which can be achieved by the following formula nStep = Math.ceil(nStep/nIncrease)*(nIncrease*nTempMultiple)/nTempMultiple;
  //Use loop to increment nIncrease to correct the scale value while(nStep%(nIncrease*5)!=0){
    nStep += nIncrease*1;
  }
  // Modify the maximum scale value nMaxScal = nStep * nSplit by multiplying the interval value by the number of segments;
  //Calculate the length of the y-axis. Here, we subtract 3 because we need to leave some distance at the top of the y-axis. var nLonY = nZoneEndY - nZoneStartY - 3;
  //Draw the y-axis scale for(let i=0;i<=nSplit;i++){
    //The starting points of the scale lines are all on the y-axis let nScaleX = nZoneStartX;
    //Calculate the value of the starting point of the y-axis scale line on the y-axis let nScaleY = nZoneEndY-Math.floor(nLonY*(i/nSplit));
    //6.2 Draw scale line fnCreatLine(nScaleX,nScaleY,nScaleX-10,nScaleY);
    //6.3 Draw scale value fnCreatText(''+i*nStep,nScaleX-20,nScaleY,'#333');
    if(i!=0){
      //6.4 Non-zero position, draw the x-axis grid line fnCreatLine(nScaleX,nScaleY,nScaleX+nLonX,nScaleY,'#ccc');
    }
  }

  //7.1 Calculate the bar chart width let nBarWidth = Math.ceil(Math.floor(nLonX*(1/nDataLon))*.8);
  //Traverse the x-axis data for(let i=0;i<nDataLon;i++){
    //7.2 Calculate the bar chart height let nBarHeight = nLonY/nMaxScal*option.series[0].data[i];
    //7.3 Calculate the starting point of the bar chart X let nBarStartX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))
                     +(Math.floor(nLonX*(1/nDataLon))-nBarWidth)/2;
    //7.4 Calculate the Y starting point of the bar chart let nBarStartY = nZoneEndY-nBarHeight;
    //7.5 Draw a bar chart fnCreatRect(nBarStartX,nBarStartY,nBarWidth,nBarHeight);
  }

  //Draw line function function fnCreatLine(sX,sY,eX,eY,color='#000'){
    //Start drawing the path oCtx.beginPath();
    //Set the path color oCtx.strokeStyle = color;
    //Set the path start and end point, draw the line oCtx.moveTo(sX,sY);
    oCtx.lineTo(eX,eY);
    //Add color to the path oCtx.stroke();
  }

  //Draw text function fnCreatText(text,x,y,color='#000',align='end',baseLine='middle'){
    //Set text color oCtx.fillStyle = color;
    //Set the horizontal alignment oCtx.textAlign = align;
    //Set vertical alignment oCtx.textBaseline = baseLine;
    //Draw text oCtx.fillText(text,x,y);
  }

  //Draw a rectangle function fnCreatRect(x,y,width,height,color='#a00'){
    //Set color oCtx.fillStyle = color;
    oCtx.fillRect(x,y,width,height);
  }
}
//Call the chart function and pass in the element id and option data fnCharts('canvasWrap',option);