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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
在JavaScript中使用timer示例
May 08 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
深入了解Python数据类型之列表
2016/06/24 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python重新加载模块的实现方法
2018/10/16 Python
python 中如何获取列表的索引
2019/07/02 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
个人事迹材料范文
2014/12/29 职场文书
环境卫生整治简报
2015/07/20 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
话题作文之成长
2019/12/09 职场文书
话题作文之呼唤
2019/12/18 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript