echarts實現的循環生成圖效果範例分享-js教程-PHP中文網

echarts實現的循環生成圖效果範例分享

小云云

發布： 2018-01-23 14:40:09

原創

4324 人瀏覽過

本文主要介紹了jQuery插件echarts實現的循環生成圖效果,結合完整實例形式分析了echarts插件循環輸出數字圖形的實現步驟與相關操作技巧,並附帶demo源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助大家。

1、問題背景：

利用for循環生產多個氣泡圖，並且每個氣泡都可以點擊

2、實作原始碼：

<!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、實作效果圖：