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 相关文章推荐
JS中的数组的sort方法使用示例
Jan 22 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
瀑布流布局代码一例
Apr 11 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
JavaScript 巧学巧用
May 23 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 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
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
js new Date()实例测试
2019/10/31 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
一些PHP的面试题
2015/05/06 面试题
项目经理聘任书
2014/03/29 职场文书
青春寄语大全
2014/04/09 职场文书
感恩寄语大全
2014/04/11 职场文书
物业工程部岗位职责
2015/02/11 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技