Exemple de partage d'effet graphique de génération de boucle implémenté par echarts-js tutoriel-php.cn

Exemple de partage d'effet graphique de génération de boucle implémenté par echarts

小云云

Libérer： 2018-01-23 14:40:09

original

4367 Les gens l'ont consulté

Cet article présente principalement l'effet de génération de boucle du plug-in jQuery echarts. Il analyse les étapes de mise en œuvre et les techniques de fonctionnement associées de la sortie de boucle du plug-in echarts sous la forme d'un exemple complet. avec le code source de démonstration que les lecteurs peuvent télécharger pour référence. Les amis qui en ont besoin peuvent le faire. Pour référence, j'espère que cela pourra aider tout le monde.

1. Contexte du problème :

Utilisez la boucle for pour produire plusieurs graphiques à bulles, et chaque bulle peut être cliquée

2. code source :

<!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>

Copier après la connexion

3. Rendu d'implémentation :