Example sharing of loop generation graph effect implemented by echarts-JS Tutorial-php.cn

Example sharing of loop generation graph effect implemented by echarts

小云云

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

Original

4324 people have browsed it

This article mainly introduces the loop generation graph effect implemented by the jQuery plug-in echarts. It analyzes the implementation steps and related operating techniques of the loop output digital graphics of the echarts plug-in in the form of a complete example. It also comes with a demo source code for readers to download for reference. Friends who need it can For reference, I hope it can help everyone.

1. Problem background:

Use for loop to produce multiple bubble charts, and each bubble can be clicked

2. Implementation source code:

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

Copy after login

3. Implementation renderings:

related Recommended:

echarts implementation of the effect of removing the X-axis, Y-axis and grid lines sharing examples

Detailed explanation of the use of adding Echarts charts in vue

PHP Detailed explanation of using Echarts to generate statistical reports

The above is the detailed content of Example sharing of loop generation graph effect implemented by echarts. For more information, please follow other related articles on the PHP Chinese website!