Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung des von Echarts implementierten Diagrammeffekts zur Schleifengenerierung

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

小云云Original: 2018-01-23 14:40:094320Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie ein Beispiel dafür, wie Echarts den Effekt des Entfernens der X-Achse, Y-Achse und Gitterlinien umsetztNächster Artikel：Teilen Sie ein Beispiel dafür, wie Echarts den Effekt des Entfernens der X-Achse, Y-Achse und Gitterlinien umsetzt

In Verbindung stehende Artikel

Mehr sehen