欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】

程序员文章站 2022-06-14 12:50:09
本文实例讲述了jquery插件echarts实现的循环生成图效果。分享给大家供大家参考，具体如下： 1、问题背景： 利用for循环生产多个气泡图，并且每个气泡都可以点击...

本文实例讲述了jquery插件echarts实现的循环生成图效果。分享给大家供大家参考，具体如下：

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,#div-chart{
        width: 99%;
        height: 100%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      .chart{
        width: 1200px;
        height: 100px;
      }
    </style>
    <script>
      $(document).ready(function(){
        buildchart();
        buildchartjs();
      });
      function buildchart()
      {
        $("#div-chart").empty();
        var chart = "";
        for(var i=0;i<8;i++)
        {
          chart += "<div id='chart"+i+"' class='chart'></div>";
        }
        $("#div-chart").append(chart);
      }
      function buildchartjs()
      {
        for(var i=0;i<8;i++)
        {
          var chart = document.getelementbyid('chart'+i);
          var echart = echarts.init(chart);
          var option = {
            legend: {
              data:['scatter1'],
              show:false
            },
            splitline:{
          　　　　  show:false
          　　 },
            grid:{
              borderwidth:0
            },
            xaxis : [
              {
                show:false,
                type : 'value',
                splitnumber: 2,
                scale: true,
                axisline:{
                  show:false
                },
                splitline:{
              　　　　  show:false
              　　 },
                axistick:{
                 show:false
                }
              }
            ],
            yaxis : [
              {
                show:false,
                type : 'value',
                splitnumber: 2,
                scale: true,
                axisline:{
                  show:false
                },
                splitline:{
              　　　　  show:false
              　　 }
              }
            ],
            series : [
              {
                name:'scatter1',
                type:'scatter',
                symbol: 'emptycircle',
                symbolsize: 20,
                itemstyle : {
                  normal: {
                    color:'#0068b7',
                    label:{
                      show: true,
                      position: 'inside',
                      textstyle : {
                        fontsize : 26,
                        fontfamily : '微软雅黑',
                        color:'#0068b7'
                      }
                    }
                  }
                },
                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>
    <div id="div-chart"></div>
  </body>
</html>

3、实现效果图：

jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】

附：完整实例代码点击此处。

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery常用插件及用法总结》、《jquery中ajax用法总结》、《jquery表格(table)操作技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

上一篇： PHP程序员玩转Linux系列 nginx初学者引导

下一篇： Vue+ElementUI实现表单动态渲染、可视化配置的方法

推荐阅读