JS verwendet Canvas-Technologie, um Echarts-Balkendiagramme zu imitieren

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

//1 Balkendiagrammdaten schreiben option = {
  //Daten der x-Achse xAxis: {
    Daten: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
  },
  //Säulendiagramm Datenreihe: [{
    //Schreiben Sie noch ein paar Datensätze, um die Diagrammeffekte verschiedener Daten anzuzeigen// Daten: [0,01, 0,2, 0,05, 0,07, 0,04, 0,13, 0,9],
    // Daten: [1, 1, 5, 7, 4, 1, 9],
    // Daten: [1213, 30, 150, 80, 70, 910, 630],
    Daten: [120, 199, 150, 180, 70, 110, 130],
    //Grafikstil: Balkendiagrammtyp: ‚Balken‘
  }]
};

//Diagrammfunktion erstellen, wrap: ID des übergeordneten Diagrammelements; data: Diagrammdatenfunktion fnCharts(wrap,data){
  //2. Holen Sie sich das CanvasWrap-Element var eWrap = document.getElementById(wrap);
  //2. Holen Sie sich die Breite und Höhe des CanvasWrap-Elements, um die Canvas-Größe festzulegen var nWrapW = eWrap.offsetWidth;
  var nWrapH = eWrap.offsetHeight;

  //3.1 Leinwand erstellen var eCanvas = document.createElement('canvas');
  //3.2 Breite und Höhe der Leinwand festlegen eCanvas.width = nWrapW;
  eCanvas.Höhe = nWrapH;
  //3.3 Fügen Sie die Leinwand in das CanvasWrap-Element ein eWrap.appendChild(eCanvas);
  //3.4 Erstellen Sie einen Zeichenkontext (um auf der Canvas-Leinwand zeichnen zu können)
  var oCtx = eCanvas.getContext('2d');

  // 4. Legen Sie die obere linke und untere rechte Ecke des Koordinatenbereichs fest. // Der Startpunkt wird auf 50,5 festgelegt, nicht auf eine Ganzzahl, um die Linie klar zu machen. var nZoneStartX = 50,5;
  var nZoneStartY = 50,5;
  var nZoneEndX = nWrapW - nZoneStartX;
  var nZoneEndY = nWrapH - nZoneStartY;

  //5.1 Verwenden Sie die Linienfunktion, um die x-Achse zu zeichnen fnCreatLine(nZoneStartX,nZoneEndY,nZoneEndX,nZoneEndY);
  //Länge der x-Achse berechnen var nLonX = nZoneEndX - nZoneStartX;
  //Länge des Datenarrays der X-Achse abrufen var nDataLon = option.xAxis.data.length;
  //Schleife entsprechend der Länge des Datenarrays der x-Achse und zeichne die Skalenlinien und Skalenwertnamen in der Schleife for(let i=0;i<nDataLon;i++){
    //Berechnen Sie den Wert des Startpunkts der Skalenlinie der X-Achse auf der X-Achse. let nScaleX = nZoneStartX+Math.floor(nLonX*(i/nDataLon));
    //Die Startpunkte der Skalenlinien liegen alle auf der x-Achse let nScaleY = nZoneEndY;
    //5.2 Zeichnen Sie eine Maßstabslinie mit einer Länge von 10
    fnCreateLine(nScaleX,nScaleY,nScaleX,nScaleY+10);
    //Skalennamen-String aus den Daten abrufen let sName = option.xAxis.data[i];
    //Startpunkt des Skalennamens berechnen let nNameX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))+Math.floor(nLonX*(1/nDataLon))/2;
    sei nNameY = nZoneEndY+15;
    //5.3 Zeichnen Sie den Skalennamen fnCreatText(sName,nNameX,nNameY,'#aaa','center');
  }

  //6.1 Verwenden Sie die Linienfunktion, um die Linie der Y-Achse zu zeichnen. fnCreatLine(nZoneStartX,nZoneEndY,nZoneStartX,nZoneStartY);
  //Bevor Sie die Teilstriche der Y-Achse zeichnen, benötigen Sie die Maximal- und Minimalwerte der Teilstriche, die Anzahl der Teilstrichliniensegmente und das Intervall zwischen den Teilstrichen.
  // Maximaler Skalierungswert. Zuerst den Maximalwert aus dem Array nehmen, dann den Maximalwert berechnen, der angezeigt werden soll. var nMaxScal = Math.max.apply(null,option.series[0].data);
  //Der minimale Skalierungswert ist in diesem Beispiel 0
  var nMinScal = 0;
  //Die Anzahl der Skalensegmente ist in diesem Beispiel auf 4 eingestellt
  var nSplit = 4;
  //Skalierungsintervallwert berechnen var nStep = (nMaxScal-nMinScal)/nSplit;
  //An dieser Stelle erscheint Ihnen der Skalenintervall möglicherweise etwas seltsam, da das Skalenintervall eines allgemeinen Diagramms ein Vielfaches von 5 ist.
  //Zum Beispiel: [0,0,5,1,0,1,5,2] oder [0,50,100,150,200].
  //Daher sind weitere Berechnungen erforderlich, um zu ermitteln, ob nStep ein Vielfaches von 5 ist. Wenn nicht, wird nIncrease auf das nächste Vielfache von 5 erhöht.
  //Berechnen Sie den ersten Schritt. Laut nStep sollte der Vielfachewert 0,5 oder 5 oder 50 oder ... sein.
  //In diesem Beispiel wird der nStep-Wert vor der Verarbeitung in einen String umgewandelt (es können auch Logarithmen und Exponentiale zur Berechnung verwendet werden).
  var sTemp = '' + nStep; //Konvertiere nStep in einen String //Deklariere eine Zahl, die erhöht werden soll, der Standardwert ist 1
  var nErhöhung = 1;
  //Deklarieren Sie eine Variable, um den durch die Dezimalmultiplikation verursachten Präzisionsfehler zu beheben
  var nTempMultiple = 1;  

  //nIncrease nimmt 10 hoch n und berechnet durch das folgende Urteil if(sTemp.indexOf('.')==-1){
    //Wenn nStep kein Dezimalkomma enthält, ist nIncrease 10 hoch sTemp.length-2.
    //Wenn beispielsweise nStep 19 ist, ist nIncrease = 10 hoch 0 und das Inkrement ist 1
    //Wenn nStep 9 ist, ist nIncrease = 10 hoch -1 und das Inkrement beträgt 0,1
    //Wenn nStep 199 ist, nIncrease = 10 hoch 1, beträgt das Inkrement 10
    nErhöhung = Math.pow(10,sTemp.Länge-2);
  }anders{
    //Wenn nStep eine Dezimalstelle enthält, ist nIncrease 10 hoch sTemp - 2.
    nErhöhung = Math.pow(10,sTemp.indexOf('.')-2);
    //Diese Variable wird verwendet, um den Genauigkeitsfehler zu beheben, der beim Multiplizieren von Dezimalzahlen auftreten kann, z. B. wenn nIncrease eine Dezimalzahl ist nTempMultiple = Math.pow(10,sTemp.indexOf('.')); 
  }
  //Runden Sie Vielfache, um die Erhöhung zu erleichtern, z. B. 165 auf 160, 16,5 auf 16, 1,65 auf 1,6, was mit der folgenden Formel erreicht werden kann: nStep = Math.ceil(nStep/nIncrease)*(nIncrease*nTempMultiple)/nTempMultiple;
  //Verwende eine Schleife, um nIncrease zu erhöhen und den Skalierungswert zu korrigieren, while(nStep%(nIncrease*5)!=0){
    nSchritt += nErhöhung*1;
  }
  // Ändern Sie den maximalen Skalierungswert nMaxScal = nStep * nSplit, indem Sie den Intervallwert mit der Anzahl der Segmente multiplizieren.
  //Länge der y-Achse berechnen. Hier subtrahieren wir 3, da wir oben auf der y-Achse etwas Abstand lassen müssen. var nLonY = nZoneEndY - nZoneStartY - 3;
  //Zeichne die Skala der y-Achse for(let i=0;i<=nSplit;i++){
    //Die Startpunkte der Skalenlinien liegen alle auf der Y-Achse let nScaleX = nZoneStartX;
    //Berechnen Sie den Wert des Startpunkts der Skalenlinie der Y-Achse auf der Y-Achse. let nScaleY = nZoneEndY-Math.floor(nLonY*(i/nSplit));
    //6.2 Maßstablinie zeichnen fnCreatLine(nScaleX,nScaleY,nScaleX-10,nScaleY);
    //6.3 Maßstabswert zeichnen fnCreatText(''+i*nStep,nScaleX-20,nScaleY,'#333');
    wenn(i!=0){
      //6.4 Ungleich Null, zeichnen Sie die Gitternetzlinie der X-Achse fnCreatLine(nScaleX,nScaleY,nScaleX+nLonX,nScaleY,'#ccc');
    }
  }

  //7.1 Berechnen Sie die Breite des Balkendiagramms let nBarWidth = Math.ceil(Math.floor(nLonX*(1/nDataLon))*.8);
  //Durchlaufe die Daten der x-Achse for(let i=0;i<nDataLon;i++){
    //7.2 Berechnen Sie die Höhe des Balkendiagramms let nBarHeight = nLonY/nMaxScal*option.series[0].data[i];
    //7.3 Berechnen Sie den Startpunkt des Balkendiagramms X let nBarStartX = nZoneStartX+Math.floor(nLonX*(i/nDataLon))
                     +(Math.floor(nLonX*(1/nDataLon))-nBalkenbreite)/2;
    //7.4 Berechnen Sie den Y-Startpunkt des Balkendiagramms let nBarStartY = nZoneEndY-nBarHeight;
    //7.5 Ein Balkendiagramm zeichnen fnCreatRect(nBarStartX,nBarStartY,nBarWidth,nBarHeight);
  }

  //Linie zeichnen-Funktion function fnCreatLine(sX,sY,eX,eY,color='#000'){
    //Beginnen Sie mit dem Zeichnen des Pfads oCtx.beginPath();
    //Pfadfarbe festlegen oCtx.strokeStyle = color;
    //Start- und Endpunkt des Pfads festlegen, Linie zeichnen oCtx.moveTo(sX,sY);
    oCtx.lineTo(eX,eY);
    //Dem Pfad Farbe hinzufügen oCtx.stroke();
  }

  //Text zeichnen Funktion fnCreatText(text,x,y,color='#000',align='end',baseLine='middle'){
    //Textfarbe festlegen oCtx.fillStyle = color;
    //Horizontale Ausrichtung festlegen oCtx.textAlign = align;
    //Vertikale Ausrichtung festlegen oCtx.textBaseline = baseLine;
    //Text zeichnen oCtx.fillText(text,x,y);
  }

  //Zeichne ein Rechteck function fnCreatRect(x,y,width,height,color='#a00'){
    //Farbe festlegen oCtx.fillStyle = color;
    oCtx.fillRect(x,y,Breite,Höhe);
  }
}
//Rufen Sie die Diagrammfunktion auf und übergeben Sie die Element-ID und die Optionsdaten fnCharts('canvasWrap',option);