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


Posted in Javascript onMarch 04, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
php输出全部gb2312编码内的汉字方法
Mar 04 #Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 #Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 #Javascript
简单实现js菜单栏切换效果
Mar 04 #Javascript
浅谈javascript的url参数parse和build函数
Mar 04 #Javascript
js css3实现图片拖拽效果
Mar 04 #Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 #Javascript
You might like
功能强大的php文件上传类
2016/08/29 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
jquery鼠标停止移动事件
2013/12/21 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
讲解Python中的递归函数
2015/04/27 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python按照多个条件排序的方法
2019/02/08 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python简单实现9宫格图片实例
2020/09/03 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
不用游标的SQL语句有哪些
2012/09/07 面试题
注塑工厂厂长岗位职责
2013/12/02 职场文书
人事主管岗位职责
2014/01/30 职场文书
教师个人年终总结
2015/02/11 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
加强党性修养心得体会
2016/01/21 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android