最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery插件echarts实现的循环生成图效果示例
时间:2017-05-22 编辑:简简单单 来源:一聚教程网
1、问题背景:
利用for循环生产多个气泡图,并且每个气泡都可以点击
2、实现源码:
代码如下 | 复制代码 |
body,html,#div-chart{ width: 99%; height: 100%; font-family:"微软雅黑"; font-size: 12px; } .chart{ width: 1200px; height: 100px; }
$(document).ready(function(){ buildChart(); buildChartJS(); }); functionbuildChart() { $("#div-chart").empty(); varchart =""; for(vari=0;i<8;i++) { chart +=" ";} $("#div-chart").append(chart); } functionbuildChartJS() { for(vari=0;i<8;i++) { varchart = document.getElementById('chart'+i); varechart = echarts.init(chart); varoption = { 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() } ] }; functioneConsole(param) { alert(param.value); console.dir(param); } echart.on("click", eConsole); echart.setOption(option); } } functionrandomDataArray() { vard = []; vararr = [3,5,7,9,10,1,2,4,8,6]; varlen = 10; for(vari=0;i { d.push([i+1,0,arr[i],]); } returnd; }
|
3、实现效果图:
相关文章
- jQuery动态生成不规则表格(前后端) 04-21
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31