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

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

发布时间 - 2026-01-10 23:25:55 点击率：次

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

# jQuery # 插件 # echarts # 循环生成图 # 在Vue中使用echarts的实例代码（3种图） # jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法 # jQuery插件Echarts实现的渐变色柱状图 # echarts学习笔记之箱线图的分析与绘制详解 # echarts饼图扇区添加点击事件的实例 # jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】 # jQuery插件echarts实现的多折线图效果示例【附demo源码下载】 # jQuery插件echarts实现的单折线图效果示例【附demo源码下载】 # Echarts动态加载多条折线图的实现代码 # 详解python 利用echarts画地图(热力图)(世界地图 # 省市地图 # 区县地图) # JavaScript使用百度ECharts插件绘制饼图操作示例 # 微软 # 相关内容 # 多个 # 感兴趣 # 给大家 # 点击此处 # 更多关于 # 所述 # 程序设计 # 操作技巧 # 选择器 # 讲述了 # width # chart # font # height # min # div # body # style

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：使用ZakeCMS多用户建站系统时，如何自定义网站模板和样式

下一篇：EmbodiedSAM：实时3D物体轮廓AI解决方案

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：使用ZakeCMS多用户建站系统时，如何自定义网站模板和样式

下一篇：EmbodiedSAM：实时3D物体轮廓AI解决方案