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

本文实例讲述了jQuery插件echarts实现的循环生成图效果。分享给大家供大家参考，具体如下：

1、问题背景：

利用为循环生产多个气泡图，并且每个气泡都可以点击

2、实现源码：

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-循环生成图/title脚本类型=' text/JAVAScript ' src=' http : jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : echart。js /脚本样式正文，html，# div-chart { width : 99%；高度： 100%;字体系列： '微软雅黑；font-size : 12px} .图表{宽度： 1200像素高度： 100像素；} /style脚本$(文档)。ready(function(){ BuildChart()；buildChartJS()；});函数buildChart() { $('#div-chart ').empty()；var图表=for(var I=0；i8；I){ chart=' div id=' chart ' I ' ' class=' chart '/div '；} $('#div-chart ').追加（图表);}函数BuildChartjs(){ for(var I=0；i8；I){ var chart=document。getelementbyid(' chart ' I)；var echart=echarts.init(图表);var选项={图例： {数据：['散点1']，show:false }，splitLine:{ show:false }，grid:{ borderWidth:0 }，xAxis : [ { show:false，键入3: ' value '，splitNumber: 2，scale: true，axis lene 3: { show 3333330微软雅黑，color:'#0068B7' } } } }，data : randomDataArray()}]}；函数EcOnSole(参数){ alert(参数。值)；控制台。dir(param)；} echart.on('click '，econ sole)；echart.setOption(选项);} }函数randomDataArray(){ var d=[]；var arr=[3，5，7，9，10，1，2，4，8，6]；var len=10 for(var I=0；伊琳；i ) { d.push([i 1，0，arr[i]，])；}返回d .}/脚本/标题正文div id=' div-chart '/div/正文/html3，实现效果图：

附：完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

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