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 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 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
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python深入学习之装饰器
2014/08/31 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python解释器spython使用及原理解析
2019/08/24 Python
Django日志及中间件模块应用案例
2020/09/10 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
书香校园活动方案
2014/02/28 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
学校教学工作总结2015
2015/05/19 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
全新239军机修复记
2022/04/05 无线电