Beispiel für die gemeinsame Nutzung des von Echarts implementierten Diagrammeffekts zur Schleifengenerierung-js-Tutorial-php.cn

Beispiel für die gemeinsame Nutzung des von Echarts implementierten Diagrammeffekts zur Schleifengenerierung

小云云

Freigeben： 2018-01-23 14:40:09

Original

4400 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Schleifenerzeugungseffekt des jQuery-Plug-Ins ECharts vorgestellt. Außerdem werden die Implementierungsschritte und die damit verbundenen Betriebstechniken der Schleifenausgabe des ECharts-Plug-Ins in Form eines vollständigen Beispiels analysiert Mit Demo-Quellcode, den Leser als Referenz herunterladen können. Als Referenz hoffe ich, dass es allen helfen kann.

1. Problemhintergrund:

Verwenden Sie die for-Schleife, um mehrere Blasendiagramme zu erstellen, und jede Blase kann angeklickt werden

2 Quellcode:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-循环生成图</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="echarts.js" ></script>
    <style>
      body,html,#p-chart{
        width: 99%;
        height: 100%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      .chart{
        width: 1200px;
        height: 100px;
      }
    </style>
    <script>
      $(document).ready(function(){
        buildChart();
        buildChartJS();
      });
      function buildChart()
      {
        $("#p-chart").empty();
        var chart = "";
        for(var i=0;i<8;i++)
        {
          chart += "<p id=&#39;chart"+i+"&#39; class=&#39;chart&#39;></p>";
        }
        $("#p-chart").append(chart);
      }
      function buildChartJS()
      {
        for(var i=0;i<8;i++)
        {
          var chart = document.getElementById(&#39;chart&#39;+i);
          var echart = echarts.init(chart);
          var option = {
            legend: {
              data:[&#39;scatter1&#39;],
              show:false
            },
            splitLine:{
          　　　　  show:false
          　　 },
            grid:{
              borderWidth:0
            },
            xAxis : [
              {
                show:false,
                type : &#39;value&#39;,
                splitNumber: 2,
                scale: true,
                axisLine:{
                  show:false
                },
                splitLine:{
              　　　　  show:false
              　　 },
                axisTick:{
                 show:false
                }
              }
            ],
            yAxis : [
              {
                show:false,
                type : &#39;value&#39;,
                splitNumber: 2,
                scale: true,
                axisLine:{
                  show:false
                },
                splitLine:{
              　　　　  show:false
              　　 }
              }
            ],
            series : [
              {
                name:&#39;scatter1&#39;,
                type:&#39;scatter&#39;,
                symbol: &#39;emptyCircle&#39;,
                symbolSize: 20,
                itemStyle : {
                  normal: {
                    color:&#39;#0068B7&#39;,
                    label:{
                      show: true,
                      position: &#39;inside&#39;,
                      textStyle : {
                        fontSize : 26,
                        fontFamily : &#39;微软雅黑&#39;,
                        color:&#39;#0068B7&#39;
                      }
                    }
                  }
                },
                data: randomDataArray()
              }
            ]
          };
          function eConsole(param)
          {
            alert(param.value);
            console.dir(param);
          }
          echart.on("click", eConsole);
          echart.setOption(option);
        }
      }
      function randomDataArray()
      {
        var d = [];
        var arr = [3,5,7,9,10,1,2,4,8,6];
        var len = 10;
        for(var i=0;i<len;i++)
        {
          d.push([i+1,0,arr[i],]);
        }
        return d;
      }
    </script>
  </head>
  <body>
    <p id="p-chart"></p>
  </body>
</html>

Nach dem Login kopieren

3. Implementierungsrendering:

Verwandte Empfehlungen:

Echarts-Implementierungsbeispiel zum Teilen des Entfernens von X-Achse, Y-Achse und Gitterlinien

Detaillierte Erklärung zum Hinzufügen von Echarts-Diagrammen in Vue

Detaillierte Erläuterung der Verwendung von Echarts zur Erstellung statistischer Berichte mit PHP

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung des von Echarts implementierten Diagrammeffekts zur Schleifengenerierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!